<template>
  <div id="spreadRoot" class="c-bg-f6 c-flex-column">
    <div class="sharetit-seat" id="J_sharetit-seat"></div>
    <div class="fromwhere-seat" id="J_fromwhere-seat"></div>
    <section v-if="spreadInfo&&spreadInfo.payType==2 && spreadInfo.commission" @click="showShareKnow = true" class="c-hh70 c-flex-row c-flex-center c-fs24 c-bg-white">
      <span>邀请好友购买，</span>
      <span class="c-fc-myellow">你可赚￥{{spreadInfo.commission}}</span>
      <span>></span>
    </section>
    <div class="c-br20 c-justify-center c-flex-row c-flex-grow1 c-h0 c-p">
      <div @click="clickGoBack" class="c-ww50 c-hh50 c-flex-row c-flex-center c-pa c-p-t24 c-p-l24 c-brp50 c-opacity30 c-bg-black">
        <i class="iconfont c-fc-white c-fs20 c-fw-b">&#xe600;</i>
      </div>
      <div class="c-br20 c-flex-column c-flex-center c-flex-grow1">
        <div id="spreadImg" @touchstart="touchStartImg" @touchmove="touchEndImg" @touchend="touchEndImg">
          <img class="c-br20 app-save-img" alt>
        </div>
        <div class="c-pv20" id="spreadCon">
          <div class="c-fs24 c-w100 c-textAlign-c" id="spreadImgTxt">长按上面图片保存海报</div>
          <div class="c-fs24 c-w100 c-textAlign-c c-mt20" id="spreadImgPromote" v-if="!$isStore() && !isFromChain && (spreadInfo && promoteObject != null && isShowPromote && ratioType != 2 && distribution != 1 && promoteObjectPrice > 0)"><span class="c-fc-xmlred c-fw-b promote-family c-mr10">{{'￥' | iosPriceFilter}}{{ isFromChain ? promoteObject.commission : promoteObjectPrice }}</span>在路上，链路购买成功后将发放</div>
        </div>
      </div>
      <!-- 课程或专栏并且没购买过 -->
      <div class="c-fs22 reward c-fc-white"
        v-if="spreadInfo &&spreadInfo.payType==2&& !spreadInfo.hasBought && !spreadInfo.hasPermission && (ckFrom == 5 || ckFrom == 9) && spreadInfo.deductibleAfterInvition * 1 > 0 && spreadInfo.isSaleOnly == 1 && !isNoSale && !$isWxApp()">
        <div class="c-hh40 c-lh40" v-if="!spreadInfo.isInvite" @click="isShowShare=true">分享可优惠{{'￥' | iosPriceFilter}}{{Number(spreadInfo.deductibleAfterInvition).toFixed(2)}}</div>
        <div class="c-hh40 c-lh40" v-else @click="clickBuyNow">已优惠{{'￥' | iosPriceFilter}}{{Number(spreadInfo.deductibleAfterInvition).toFixed(2)}}{{'立即购买' | iosPayText(ckFrom)}}</div>
      </div>
    </div>
    <footer ref="footer" class="c-bg-white c-bd-t1 c-w100 c-ph24 c-pt24 c-pb20 c-br-tr20 c-br-tl20" :class="(chooseIndex===''||chooseIndex!=0)||(chooseIndex==0&&content[0] != null&&(content[0].isHiddenOfficaltemplate==0||!content[0].isHiddenOfficaltemplate))?'c-hh260':''">
      <div class="c-w100 c-p">
        <div class="c-contexty-hidden c-contextX-scroll c-ws-n c-pr144 c-pz1" style="overflow:auto" id="scroll" v-if="(chooseIndex===''||chooseIndex!=0)||(chooseIndex==0&&content[0] != null&&(content[0].isHiddenOfficaltemplate==0||!content[0].isHiddenOfficaltemplate))">
          <template v-for="(item,index) in content">
            <div v-if="item.isShowPoster" :key="index" @click="clickChangeImg(item.modifyIndex, index, item)" class="c-p c-mr20 c-inlineblack c-text-hidden c-br10" :class="curIndex == index ?'c-ww80 c-hh142 theme-bd2':'c-ww72 c-hh130'">
              <img class="c-h c-w100 img-pe-none c-object-fit-cover" :src="item.bgImage" alt>
              <div v-show="curIndex == index" class="c-flex-row c-flex-center c-pa c-p-b4 c-p-r6 c-brp50 c-ww24 c-hh24 theme-bg c-bd1-white">
                <i class="iconfont c-fc-white c-fs14">&#xe76c;</i>
              </div>
            </div>
          </template>
        </div>
        <div class="c-bg-white  c-flex-column c-justify-center c-aligni-center c-ww144 c-hh160 c-pa c-pz2 c-p-t0 c-p-r-2 spread_shadow" @click="handleClickShareOpenModal">
          <i class="iconfont icon-yaoqinghaoyou c-fs40 c-ml40"></i>
          <p class="c-fs20 c-mt14 c-ml40">分享文案</p>
        </div>
      </div>
      <div class="c-flex-row c-justify-center c-mt12">
        <div v-if="!isFaShou" class="c-ww164 c-hh44 c-br24 c-fs22 c-flex-center c-flex-row" @click="clickMoreShare">
          <i class="iconfont c-fs52 c-fc-green c-mr16">&#xe928;</i>
          分享微信
        </div>
        <div v-if="shortLink" class="c-ww164 c-hh44 c-br24 c-fs22 c-flex-center c-flex-row c-ml132" @click="copyShortLink">
          <i class="iconfont c-fs52 c-fc-1696FF c-mr16">&#xe853;</i>
          复制链接
        </div>
      </div>
    </footer>

    <div class="c-pb200 c-w100 canvasBox c-flex-row" v-if="content.length > 0">
      <div class="invitation anvasContent" id="canvas0" v-if="currentObject != null && currentObject.cardType == 2 && modifyIndex == 0">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div v-if="currentObject.bgLayer" class="customOne bgLocation">
          <div v-for="(item,index) in currentObject.bgLayer" :key="index">
            <div v-if="item.type==3" :style="item" class="c-pa">
              <div :class="item.layout == 1 ? 'c-flex-column c-aligni-center' : item.layout == 2 ? 'c-flex-row c-aligni-center' : item.layout == 3 ? 'c-flex-row c-aligni-start' : ''">
                <img v-if="item.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
                <p v-if="item.isShowNickName==1" :class="item.layout != 1 ? 'marginL30':''">{{spreadInfo.nickname}}</p>
              </div>
            </div>
            <div v-if="item.type==2" :style="item" class="c-pa c-table c-wordBreakAll">
              <span class="c-tableCell" :style="'vertical-align:'+item.verticalAlign">{{item.name}}</span>
            </div>
            <div v-if="item.type==4" :style="item" class="c-pa c-table c-wordBreakAll">
              <span class="c-tableCell" :style="'vertical-align:'+item.verticalAlign">{{item.name}}</span>
            </div>
            <img v-if="item.type==1" class="c-pa" :src="item.redirect&&item.redirect==3?$addXossFilter(item.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt :style="item">
          </div>
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>
        <div v-if="userType ==1 && qrcodeStyle==1&&!currentObject.bgLayer" class="customOne bgLocation">
          <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
          <div class="mt20" :style="'color:' + wordColor">
            <p v-if="currentObject.isShowNickName==1" class="fs28 h27">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt30 mb102" v-if="isCustom == 1 && currentObject.wordType== 1">{{currentObject.word}}</p>
            <p class="fs24 mt30 mb102" v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa l70 b100 img-pe-none">
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>

        <div v-if="userType ==1 && qrcodeStyle==2&&!currentObject.bgLayer" class="customOne bgLocation">
          <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
          <div class="mt20" :style="'color:' + wordColor">
            <p v-if="currentObject.isShowNickName==1" class="fs28 h27">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt30 mb102" v-if="isCustom == 1 && currentObject.wordType== 1">{{currentObject.word}}</p>
            <p class="fs24 mt30 mb102" v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa l295 b100 img-pe-none">
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>

        <div v-if="userType ==1 && qrcodeStyle==3&&!currentObject.bgLayer" class="customOne bgLocation">
          <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
          <div class="mt20" :style="'color:' + wordColor">
            <p v-if="currentObject.isShowNickName==1" class="fs28 h27">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt30 mb102" v-if="isCustom == 1 && currentObject.wordType== 1">{{currentObject.word}}</p>
            <p class="fs24 mt30 mb102" v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa r50 b100 img-pe-none">
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>

        <div v-if="userType ==2 && qrcodeStyle==1&&!currentObject.bgLayer" class="customOne bgLocation">
          <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="headerImg120 c-brp50 c-m-0auto img-pe-none">
          <div class="mt20" :style="'color:' + wordColor">
            <p v-if="currentObject.isShowNickName==1" class="fs28 h27 c-textAlign-c">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt30 mb102 c-textAlign-c" v-if="isCustom == 1 && currentObject.wordType== 1">{{currentObject.word}}</p>
            <p class="fs24 mt30 mb102 c-textAlign-c" v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa l70 b100 img-pe-none">
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>

        <div v-if="userType ==2 && qrcodeStyle==2&&!currentObject.bgLayer" class="customOne bgLocation">
          <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="headerImg120 c-brp50 c-m-0auto img-pe-none">
          <div class="mt20" :style="'color:' + wordColor">
            <p v-if="currentObject.isShowNickName==1" class="fs28 h27 c-textAlign-c">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt30 mb102 c-textAlign-c" v-if="isCustom == 1 && currentObject.wordType== 1">{{currentObject.word}}</p>
            <p class="fs24 mt30 mb102 c-textAlign-c" v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa l295 b100 img-pe-none">
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>

        <div v-if="userType ==2 && qrcodeStyle==3&&!currentObject.bgLayer" class="customOne bgLocation">
          <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="headerImg120 c-brp50 c-m-0auto img-pe-none">
          <div class="mt20" :style="'color:' + wordColor">
            <p v-if="currentObject.isShowNickName==1" class="fs28 h27 c-textAlign-c">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt30 mb102 c-textAlign-c" v-if="isCustom == 1 && currentObject.wordType== 1">{{currentObject.word}}</p>
            <p class="fs24 mt30 mb102 c-textAlign-c" v-if="isCustom == 1 && currentObject.wordType== 2">{{currentObject.customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa r50 b100 img-pe-none">
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>

        <div v-if="userType ==3 && qrcodeStyle==1&&!currentObject.bgLayer" class="customOne bgLocation">
          <div class="customThree c-pa">
            <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="headerImg120 c-brp50 c-pa c-p-t0 c-p-l0 img-pe-none">
            <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 img-pe-none">
          </div>
          <div class="customThreeText c-pa mt20" :style="'color:' + wordColor">
            <p v-if="currentObject.isShowNickName==1" class="fs28 h27">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt12" v-if="isCustom == 1 && currentObject.wordType== 1">{{currentObject.word}}</p>
            <p class="fs24 mt12" v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</p>
          </div>
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>
        <div v-if="userType ==3 && qrcodeStyle==2&&!currentObject.bgLayer" class="customOne bgLocation">
          <div class="customThree c-pa c-flex-row">
            <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
            <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="h160 ml120 img-pe-none">
          </div>
          <div class="customThreeText c-pa" :style="'color:' + wordColor">
            <p v-if="currentObject.isShowNickName==1" class="fs28 h27">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt12" v-if="isCustom == 1 && currentObject.wordType== 1">{{currentObject.word}}</p>
            <p class="fs24 mt12" v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</p>
          </div>
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>
        <div v-if="userType ==3 && qrcodeStyle==3&&!currentObject.bgLayer" class="customOne bgLocation">
          <div class="customThree c-pa w650">
            <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="headerImg120 c-brp50 c-pa c-p-t0 c-p-l0 img-pe-none">
            <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 ml490 img-pe-none">
          </div>
          <div class="customThreeText c-pa" :style="'color:' + wordColor">
            <p v-if="currentObject.isShowNickName==1" class="fs28 h27">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt12" v-if="isCustom == 1 && currentObject.wordType== 1">{{currentObject.word}}</p>
            <p class="fs24 mt12" v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</p>
          </div>
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>

        <div v-if="userType ==-1 && qrcodeStyle==1&&!currentObject.bgLayer" class="customOne bgLocation">
          <div class="mt20 c-flex-row c-flex-center" :style="'color:' + wordColor">
            <p class="fs24 mb102 c-textAlign-c" v-if="isCustom == 1 && currentObject.wordType== 1">{{currentObject.word}}</p>
            <p class="fs24 mb102 c-textAlign-c" v-if="isCustom == 1 && currentObject.wordType== 2">{{currentObject.customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa l70 b100 img-pe-none">
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>

        <div v-if="userType ==-1 && qrcodeStyle==2&&!currentObject.bgLayer" class="customOne bgLocation">
          <div class="mt20 c-flex-row c-flex-center" :style="'color:' + wordColor">
            <p class="fs24 mb102 c-textAlign-c" v-if="isCustom == 1 && currentObject.wordType== 1">{{currentObject.word}}</p>
            <p class="fs24 mb102 c-textAlign-c" v-if="isCustom == 1 && currentObject.wordType== 2">{{currentObject.customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa l295 b100 img-pe-none">
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>

        <div v-if="userType ==-1 && qrcodeStyle==3&&!currentObject.bgLayer" class="customOne bgLocation">
          <div class="mt20 c-flex-row c-flex-center" :style="'color:' + wordColor">
            <p class="fs24 mb102 c-textAlign-c" v-if="isCustom == 1 && currentObject.wordType== 1">{{currentObject.word}}</p>
            <p class="fs24 mb102 c-textAlign-c" v-if="isCustom == 1 && currentObject.wordType== 2">{{currentObject.customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa r50 b100 img-pe-none">
          <div v-if="isShowCkjr" class="show-companyInfo c-bg-sgray">{{ showCkjrText }}</div>
        </div>
      </div>
      <div class="invitation anvasContent" id="canvas1" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 1">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div class="canvasOne  c-h c-p">
            <div class="c-textAlign-c">
              <p class="headerImgFive">
                <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="c-brp50 w120 h120 img-pe-none">
              </p>
            </div>
            <div class="color-one fs24 mb40 c-fw400 minh65 mt16 c-textAlign-c">
              <span v-if="currentObject.isShowNickName==1" class="c-mr20">{{spreadInfo.nickname}}</span>
              <span v-if="isCustom == 0">{{currentObject.word}}</span>
              <span v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</span>
              <span v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</span>
            </div>
            <!-- 10社群 11测评 12商城 7活动 53预约 -->
            <div class="hidden c-m-0auto br15 c-p" :class="(ckFrom == 10 || ckFrom == 11 || ckFrom == 12) ? 'w320 h320': (ckFrom == 7 || ckFrom == 53) ? 'h240 maxw480': (ckFrom == 142) ? 'w320 max480':'w480 maxh320'">
              <img  :src="$addXossFilter(spreadInfo.cover)" alt class="w100 br15 img-pe-none">
              <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:36px;top: 40px;left:30px;font-weight: bolder;" class="c-pa c-fc-white">
                {{ spreadInfo.shareTitle }}
              </div>
            </div>
            <div v-if="!isFromVip" class="mt12 fs32 c-fw-b w507 c-m-0auto color-one" ref="shareTitle1" style="padding-left: 10px">
              <span class="c-textAlign-l c-wb-ba">
                {{spreadInfo.shareTitle}}
              </span>
            </div>
            <div style="padding-left: 40px;">
              <p v-if="currentObject.lecturerName" class="mt10 fs24 c-fc-xblack c-text-ellipsis1 w507 c-flex-row">
                <span>{{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</span>
              </p>
              <p v-if="currentObject.isShowTime && currentObject.startAt" class="mt10 fs24 c-fc-sblack c-text-ellipsis1 w100 c-textAlign-l">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
              <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" class="mt25 c-fc-xblack fs24 c-textAlign-l c-text-ellipsis1 lh-24 w507 c-m-0auto">
                主办方: {{spreadInfo.organizer}}</p>
              <div class="mt25 c-fc-xblack fs32 c-textAlign-l c-text-ellipsis1 " v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null">
                <p v-if="spreadInfo.price && spreadInfo.price !=null" class="mt5 c-pl5 c-inlineblack">{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</p>&nbsp;
                <p v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&& Number(spreadInfo.originalPrice) !=0" class='mt5 c-fc-sgray c-pl5 oldPrice c-inlineblack fs26'>
                  原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</p>
              </div>
              <div class="w507 c-m-0auto mt25 fs24">
                <p class="c-fc-xblack c-textAlign-l c-text-ellipsis1" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间: {{spreadInfo.date}}</p>
                <p class="c-fc-xblack mt12 c-textAlign-l" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点: {{spreadInfo.place}}</p>
              </div>
            </div>

            <div class="c-flex-row" style="width: 660px;margin:0 auto; position: absolute; bottom: 150px; left:40px">
              <img :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg200 img-pe-none">
              <div class="c-flex-column c-justify-sb" style="border-radius:14px;margin-left:20px;height: 200px;">
                <div class="c-text-hidden" style="border-radius:14px;padding:0;font-size:24px;line-height:36px;text-align: left;color:#666666;width:260px;">
                  <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
                </div>
                <div style="width:260px;height:54px;border-radius:30px;font-size:26px;background:#CD8169;" class="c-flex-row c-flex-center c-fw600 c-fc-white">
                  <p>长按扫码查看详情</p>
                </div>
              </div>
            </div>
            <div v-if="isShowCkjr" class="show-companyInfo c-opacity50 spread1-companyInfo">{{ showCkjrText }}</div>
          </div>
        </div>
      </div>

      <div class="invitation anvasContent" id="canvas2" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 2">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div class="canvasTwo  c-h c-p">
            <div class="c-textAlign-c">
              <p class="headerImgFive">
                <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl)" alt class="c-brp50 w120 h120 img-pe-none">
              </p>
            </div>
            <div class="color-two c-opacity50 fs24 mb40 c-fw400 minh65 mt16 c-textAlign-c" >
              <span v-if="currentObject.isShowNickName==1" class="c-mr20">{{spreadInfo.nickname}}</span>
              <span v-if="isCustom == 0">{{currentObject.word}}</span>
              <span v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</span>
              <span v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</span>
            </div>
            <!-- 10社群 11测评 12商城 7活动 53预约 -->
            <div class="hidden c-m-0auto br15 c-p" :class="(ckFrom == 10 || ckFrom == 11 || ckFrom == 12) ? 'w320 h320': (ckFrom == 7 || ckFrom == 53) ? 'h240 maxw480':(ckFrom == 142) ? 'w320 max480':'w480 maxh320'">
              <img :src="$addXossFilter(spreadInfo.cover)" alt class="w100 br15 img-pe-none">
              <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:36px;top: 40px;left:30px;font-weight: bolder;" class="c-pa c-fc-white">
                {{ spreadInfo.shareTitle }}
              </div>
            </div>
            <div v-if="!isFromVip" class="mt12 c-wb-ba fs32 c-fw-b w507 c-m-0auto color-two" ref="shareTitle2">
              <span class="c-textAlign-l">
                {{ spreadInfo.shareTitle }}
              </span>
            </div>
            <p v-if="currentObject.lecturerName" class="mt10 color-two fs24 c-text-ellipsis1 w100 c-textAlign-l">
              {{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</p>
            <p v-if="currentObject.isShowTime && currentObject.startAt" class="mt10 fs24 color-two  c-text-ellipsis1 w100 c-textAlign-l">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
            <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" class="mt25 color-two fs24 c-textAlign-l c-text-ellipsis1 lh-24 w507 c-m-0auto">
              主办方: {{spreadInfo.organizer}}</p>
            <div class="mt25 fs32 c-textAlign-l c-text-ellipsis1" v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null">
              <p v-if="spreadInfo.price && spreadInfo.price !=null" class="mt5 c-pl5 c-inlineblack c-fc-white">{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</p>&nbsp;
              <p v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&&Number(spreadInfo.originalPrice) !=0" class='mt5 c-fc-sgray c-pl5 oldPrice c-inlineblack fs26'>
                原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</p>
            </div>
            <div class="w507 c-m-0auto mt25">
              <p class="color-two fs24 c-textAlign-l c-text-ellipsis1" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间: {{spreadInfo.date}}</p>
              <p class="color-two fs24 mt12 c-textAlign-l" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点: {{spreadInfo.place}}</p>
            </div>
            <div class="c-pa c-flex-row c-justify-center c-w100" style="width: 560px;margin:0 auto; bottom: 250px; right: -45px;">
              <img :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg200 img-pe-none">
              <!-- <p class="mt20 fs26 color-two" ref="fromWhere2"> {{ currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from }}</p> -->
              <div class="c-flex-column c-justify-sb margin-l10" style="border-radius:14px;margin-left:20px;height: 200px;">
                <div class="c-text-hidden" style="border-radius:14px;font-size:24px;line-height:36px;text-align: left;color:#dcc5b0; width:260px;">
                  <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
                </div>
                <div style="width:260px;height:54px;border-radius:30px;font-size:25px;background:#DCC5B0;" class="c-flex-row c-flex-center c-fw600 c-fc-xblack">
                  <p>长按扫码查看详情</p>
                </div>
              </div>

            </div>
            <div v-if="isShowCkjr" class="show-companyInfo c-opacity50 spread1-companyInfo">{{ showCkjrText }}</div>
          </div>
        </div>
      </div>

      <div class="invitation anvasContent" id="canvas3" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 3">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="canvasSix bgLocation c-h c-p">
          <div class="c-textAlign-c">
            <p class="headerImgFive">
              <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="c-brp50 w120 h120 img-pe-none">
            </p>
          </div>
          <div class="fs24 c-fc-sblack mb40 c-fw400 minh65 mt16 c-textAlign-c">
            <span v-if="currentObject.isShowNickName==1" class="c-mr20">{{spreadInfo.nickname}}</span>
            <span v-if="isCustom == 0">{{currentObject.word}}</span>
            <span v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</span>
            <span v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</span>
          </div>
          <!-- 10社群 11测评 12商城 7活动 53预约 -->
          <div class="hidden c-m-0auto br15 c-p" :class="(ckFrom == 10 || ckFrom == 11 || ckFrom == 12) ? 'w320 h320': (ckFrom == 7 || ckFrom == 53) ? 'h240 maxw480':(ckFrom == 142) ? 'w320 max480':'w480 maxh320'">
            <img :src="$addXossFilter(spreadInfo.cover)" alt class="w100 br15 img-pe-none">
            <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:36px;top: 40px;left:30px;font-weight: bolder;" class="c-pa c-fc-white">
              {{ spreadInfo.shareTitle }}
            </div>
          </div>
          <div v-if="!isFromVip" class=" w507 c-m-0auto c-wb-ba fs32 c-fw-b mt30 c-textAlign-l" style="padding-left: 10px;" ref="shareTitle3">
            {{ spreadInfo.shareTitle }}
          </div>
          <div class="h65" style="margin-left: 130px;">
            <p v-if="currentObject.lecturerName" class="mt25 c-fc-sblack fs24 c-text-ellipsis1 c-textAlign-l c-m-0auto w100">
              {{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</p>
            <p v-if="currentObject.isShowTime && currentObject.startAt" class="mt20 fs24 c-fc-sblack  c-text-ellipsis1 w100 c-textAlign-l">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
            <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" class="mt25 c-fc-sblack fs24  c-textAlign-l c-m-0auto c-text-ellipsis1 ml120 w510 lh-24">
              主办方: {{spreadInfo.organizer}}</p>
            <div class="mt30 c-fc-gray fs24 ml9 c-text-ellipsis1" v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null">
              <p v-if="spreadInfo.price && spreadInfo.price !=null" class="mt5 c-pl5 c-inlineblack c-fc-xblack">{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</p> &nbsp;&nbsp;
              <p v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&&Number(spreadInfo.originalPrice) !=0" class='mt5 c-fc-sgray c-pl5 oldPrice c-inlineblack'>
                原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</p>
            </div>
            <div class="mt25 c-w80 c-m-0auto">
              <p class="c-fc-sblack fs24 c-textAlign-l c-text-ellipsis1" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间: {{spreadInfo.date}}</p>
              <p class="c-fc-sblack fs24 mt12 c-textAlign-l" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点: {{spreadInfo.place}}</p>
            </div>
          </div>
          <div class="c-pa c-flex-row c-justify-center c-w100" style="width: 560px;margin:0 auto; bottom: 150px; right: 58px;">
            <img :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg200 img-pe-none">
            <!-- <p class="mt20 fs26 color-two" ref="fromWhere2"> {{ currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from }}</p> -->
            <div class="c-flex-column c-justify-sb margin-l10" style="border-radius:14px;margin-left:20px;height: 200px;">
              <div class="c-text-hidden" style="border-radius:14px;padding:0 25px;font-size:24px;line-height:36px;text-align: left;color:#666;">
                <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
              </div>
              <div style="width:260px;height:54px;border-radius:30px;font-size:25px;background:#4372C0;" class="c-flex-row c-flex-center c-fw600 c-fc-white">
                <p>长按扫码查看详情</p>
              </div>
            </div>
          </div>
          <!-- <div class="c-pa b110 c-flex-column c-flex-center c-w100">
            <img :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg200 img-pe-none">
            <p class="fs26 w500 color-six mt16" ref="fromWhere3"> {{ currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from }}</p>
          </div> -->
          <div v-if="isShowCkjr" class="show-companyInfo fc-white spread6-companyInfo">{{ showCkjrText }}</div>
        </div>
      </div>

      <div class="invitation anvasContent" id="canvas4" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 4">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation c-p">
          <div class="canvasFour">
            <!-- 头像部分 -->
            <div class="c-flex-row c-aligni-center h120 avatar-bg pl20 pr40 c-pa c-p-l0">
              <p class="headerImg88 c-mr20">
                <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="c-brp50 w100 h100 img-pe-none">
              </p>
              <p v-if="currentObject.isShowNickName==1" class="fs28 c-fc-xblack h27">{{spreadInfo.nickname}}</p>
            </div>
            <!-- 内容 -->
            <div class="mt280">
              <div class="c-textAlign-c">
                <p class="fs28 c-fc-xblack mt30 mb40 minh65 c-fw400 c-fstyle-i" v-if="isCustom == 0">“{{currentObject.word}}”</p>
                <p class="fs28 c-fc-xblack mt30 mb40 minh65 c-fw400 c-fstyle-i" v-if="isCustom == 1 && currentObject.wordType == 1">“{{currentObject.word}}”</p>
                <p class="fs28 c-fc-xblack mt30 mb40 minh65 c-fw400 c-fstyle-i" v-if="isCustom == 1 && currentObject.wordType == 2">“{{currentObject.customWords}}”</p>
              </div>
              <div class="hidden c-bg-white c-m-0auto br10 c-p" :class="(ckFrom == 10 || ckFrom == 11 || ckFrom == 12) ? 'w300 h300': (ckFrom == 7 || ckFrom == 53) ? 'maxw450 h300':(ckFrom == 142) ? 'w300 maxh450':'w450 maxh300'">
                <img :src="$addXossFilter(spreadInfo.cover)" alt class="w100 img-pe-none br10">
                <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:36px;top: 40px;left:30px;font-weight: bolder;" class="c-pa c-fc-white">{{spreadInfo.shareTitle}}</div>
              </div>
              <div v-if="!isFromVip" class="mt12 c-wb-ba fs32 w507 c-m-0auto" style="padding-left: 24px;" ref="shareTitle4">
                {{ spreadInfo.shareTitle }}
              </div>
              <div v-if="currentObject.lecturerName"
                class="mt25 c-fc-xblack fs24 h40 c-text-ellipsis1 c-textAlign-l c-flex-row" style="margin-left: 60px;">
                <div>{{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}</div>
                <div class="h40">{{currentObject.lecturerName}}</div>
              </div>
              <div style="margin-left: 60px;">
                <p v-if="currentObject.isShowTime && currentObject.startAt" class="mt10 fs24  c-fc-xblack  c-text-ellipsis1 w100 c-textAlign-l">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
                <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" class="mt25 c-fc-gray fs26 h23 w507 c-textAlign-l c-text-ellipsis1 lh-24 c-m-0auto">
                  主办方: {{spreadInfo.organizer}}</p>
                <div class="mt25 c-fc-gray fs24 c-text-ellipsis1 w100 c-textAlign-l" v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null">
                  <p v-if="spreadInfo.price && spreadInfo.price !=null" class="mt5 fc-price c-pl5 c-inlineblack">价格：&nbsp;{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</p>
                  &nbsp;&nbsp;
                  <p v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&&Number(spreadInfo.originalPrice) !=0" class='mt5 c-fc-sgray c-pl5 oldPrice c-inlineblack'>
                    原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</p>
                </div>
                <div class="w507 c-m-0auto mt12">
                  <p class="c-fc-gray fs24 c-textAlign-l c-text-ellipsis1" v-if="spreadInfo.date && spreadInfo.date !=null && spreadInfo.date != ''">时间: {{spreadInfo.date}}</p>
                  <p class="c-fc-gray fs24 mt12 c-textAlign-l" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点: {{spreadInfo.place}}</p>
                </div>
              </div>
              <!-- <div class="c-pa c-flex-row c-justify-center c-w100" style="width: 570px;margin:0 auto; bottom: 150px; left: 100px;">
                <img :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg200 img-pe-none">
                <div class="c-flex-column c-justify-sb margin-l10" style="border-radius:14px;margin-left:20px;height: 200px;">
                  <div class="c-text-hidden" style="border-radius:14px;padding:0 25px;font-size:24px;line-height:36px;text-align: left;color:#666;width:260px;">
                    <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
                  </div>
                  <div style="width:260px;height:54px;border-radius:30px;font-size:26px;background:#758CDA;" class="c-flex-row c-flex-center c-fw600 c-fc-white">
                    <p>长按扫码查看详情</p>
                  </div>
                </div>
              </div> -->
              <div class="c-pa c-flex-row c-justify-center" style="width: 560px;margin:0 auto; bottom: 150px;left: 130px;">
                <img :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg200 img-pe-none">
                <div class="c-flex-grow1 c-w0 c-ml20">
                  <div class="c-text-hidden" style="font-size:24px;line-height:36px;text-align: left;color:#666;width:280px; height: 140px;">
                    <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
                  </div>
                  <div style="width:260px;height:54px;border-radius:30px;font-size:26px;background:#758CDA;" class="c-flex-row c-flex-center c-fw600 c-fc-white">
                    <p>长按扫码查看详情</p>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="isShowCkjr" class="show-companyInfo">{{ showCkjrText }}</div>
          </div>
        </div>

      </div>

      <div class="invitation anvasContent" id="canvas5" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 5">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="canvasSix bgLocation c-p c-h">
          <div class="c-textAlign-c">
            <p class="headerImgFive">
              <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="c-brp50 w120 h120 img-pe-none">
            </p>
          </div>
          <div class="fs24 color-seven mb40 c-fw400 minh65 mt16 c-textAlign-c" >
            <span v-if="currentObject.isShowNickName==1" class="c-mr20">{{spreadInfo.nickname}}</span>
            <span v-if="isCustom == 0">{{currentObject.word}}</span>
            <span v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</span>
            <span v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</span>
          </div>
          <!-- 10社群 11测评 12商城 7活动 53预约 -->
          <div class="hidden c-m-0auto br15 c-p" :class="(ckFrom == 10 || ckFrom == 11 || ckFrom == 12) ? 'w320 h320': (ckFrom == 7 || ckFrom == 53) ? 'h240 maxw480':(ckFrom == 142) ? 'w320 maxh480':'w480 maxh320'">
            <img :src="$addXossFilter(spreadInfo.cover)" alt class="w100 br15 img-pe-none">
            <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:36px;top: 40px;left:30px;font-weight: bolder;" class="c-pa c-fc-white">
              {{ spreadInfo.shareTitle }}
            </div>
          </div>
          <div v-if="!isFromVip" class="w507 c-m-0auto c-wb-ba fs32 c-fw-b mt30 color-seven c-textAlign-l" ref="shareTitle5">
            {{ spreadInfo.shareTitle}}
          </div>
          <div class="h65" style="margin-left: 118px;">
            <p v-if="currentObject.lecturerName" class="mt25 color-seven fs24 c-text-ellipsis1 w100 c-textAlign-l c-m-0auto">
              {{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</p>
            <p v-if="currentObject.isShowTime && currentObject.startAt" class="mt20 fs24 color-seven  c-text-ellipsis1 w100 c-textAlign-l">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
            <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" class="mt25 color-seven fs24  c-textAlign-l c-m-0auto c-text-ellipsis1 ml120 w510 lh-24">
              主办方: {{spreadInfo.organizer}}</p>
            <div class="mt25 c-fc-gray fs24 c-textAlign-l c-text-ellipsis1" v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null">
              <p v-if="spreadInfo.price && spreadInfo.price !=null" class="mt5 c-fc-white c-pl5 c-inlineblack">{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</p> &nbsp;&nbsp;
              <p v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&&Number(spreadInfo.originalPrice) !=0" class='mt5 c-fc-gray c-pl5 oldPrice c-inlineblack'>
                原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</p>
            </div>
            <div class="mt25 c-w80 c-m-0auto color-seven">
              <p class="fs24 c-textAlign-l c-text-ellipsis1" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间: {{spreadInfo.date}}</p>
              <p class="fs24 mt12 c-textAlign-l" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点: {{spreadInfo.place}}</p>
            </div>
          </div>
          <div class="c-pa c-flex-column c-flex-center c-w100" style="bottom: 70px;">
            <img :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg200 img-pe-none">
            <p class="fs26 w500 color-seven mt20 c-textAlign-c" ref="fromWhere5" style="width: 334px;">{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
            <div style="width:260px;height:54px;border-radius:30px;font-size:26px;background:#DCC5B0;margin-top:20px" class="c-flex-row c-flex-center c-fw600 c-fc-xblack">
              <p>长按扫码查看详情</p>
            </div>
          </div>
          <div v-if="isShowCkjr" class="show-companyInfo spread1-companyInfo c-opacity50">{{ showCkjrText }}</div>
        </div>
      </div>

      <div class="invitation anvasContent" id="canvas6" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 6">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="canvasOne bgLocation">
          <div>
            <p class="headerImgFive">
              <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="c-brp50 w120 h120 img-pe-none">
            </p>
          </div>
          <div class=" fs24 mb40 c-fw400 minh65 c-textAlign-c mt16" style="width:100%">
            <span v-if="currentObject.isShowNickName==1" class="c-mr20 c-fc-xblack">{{spreadInfo.nickname}}</span>
            <span v-if="isCustom == 0" class="c-fc-gray">{{currentObject.word}}</span>
            <span v-if="isCustom == 1 && currentObject.wordType == 1" class="c-fc-gray">{{currentObject.word}}</span>
            <span v-if="isCustom == 1 && currentObject.wordType == 2" class="c-fc-gray">{{currentObject.customWords}}</span>
          </div>
          <div class="paddingAll10 hidden c-bg-white c-m-0auto c-p" :class="(ckFrom == 10 || ckFrom == 11 || ckFrom == 12) ? 'w580 h580': (ckFrom == 7 || ckFrom == 53) ? 'maxw580 h400':(ckFrom == 142) ? 'w400 h580':'w580 maxh400'">
            <img :src="$addXossFilter(spreadInfo.cover)" alt class="w100 img-pe-none">
            <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:40px;top: 60px;left:40px;font-weight: bolder;" class="c-pa c-fc-white">
              {{ spreadInfo.shareTitle }}
            </div>
          </div>
          <div class="c-m-0auto" :class="(ckFrom == 10 || ckFrom == 11 || ckFrom == 12) ? 'w580 h580': (ckFrom == 7 || ckFrom == 53) ? 'maxw580 h400':(ckFrom == 142) ? 'w400 h580':'w580 maxh400'">
            <div v-if="!isFromVip" class="mt30 w540  ml9 c-wb-ba fs32 c-fc-xblack c-fw-b" ref="shareTitle6">
              {{ spreadInfo.shareTitle }}
            </div>
            <p v-if="currentObject.lecturerName" class="mt30 c-fc-gray fs24 ml9 w100">
              {{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</p>
            <p v-if="currentObject.isShowTime && currentObject.startAt" class="mt20 fs24 c-fc-gray  c-text-ellipsis1 w100 ml9">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
            <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" class="mt30 c-fc-gray fs24 ml9 c-text-ellipsis1 lh-24">主办方: {{spreadInfo.organizer}}</p>
            <div class="mt30 ml9 ">
              <p class="c-fc-gray fs24 c-text-ellipsis1" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间: {{spreadInfo.date}}</p>
              <p class="c-fc-gray fs24 mt12" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点: {{spreadInfo.place}}</p>
            </div>
          </div>
          <div class="c-pa c-flex-row c-justify-center" style="width: 680px;margin:0 auto; bottom: 100px;left: 80px;">
            <img :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg200 img-pe-none">
            <div class="c-flex-grow1 c-w0 c-ml20">
              <div class="c-text-hidden" style="font-size:24px;line-height:36px;text-align: left;color:#666;width:330px; height: 140px;">
                <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
              </div>
              <div style="width:260px;height:54px;border-radius:30px;font-size:26px;background:#4275EC;" class="c-flex-row c-flex-center c-fw600 c-fc-white">
                <p>长按扫码查看详情</p>
              </div>
            </div>
          </div>
          <div v-if="isShowCkjr" class="show-companyInfo spread3-companyInfo">{{ showCkjrText }}</div>
        </div>

      </div>

      <div class="invitation anvasContent" id="canvas7" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 7">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div class="canvasFive c-h">
            <div class="content-five c-p c-h br20 c-bg-white ">
              <div class="c-textAlign-c">
                <div v-if="currentObject.isShowAvatar==1 || currentObject.isShowNickName==1">
                  <p class="headerImgFive">
                    <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="c-brp50 w100 h100 img-pe-none">
                  </p>
                  <p v-if="currentObject.isShowNickName==1" class="fs28 c-fc-xblack mt20 h27 c-fw400">{{spreadInfo.nickname}}</p>
                </div>
                <div v-else>
                  <img src="../../../assets/i/wap/poster/title-5.png" class="w326 h80 c-m-0auto" alt="">
                </div>
                <p class="fs24 c-fc-gray mb64 minh65 c-fw400" :class="currentObject.isShowAvatar==0 && currentObject.isShowNickName==1 ? 'mt30' : 'mt60'" v-if="isCustom == 0">{{currentObject.word}}</p>
                <p class="fs24 c-fc-gray mb64 minh65 c-fw400" :class="currentObject.isShowAvatar==0 && currentObject.isShowNickName==1 ? 'mt30' : 'mt60'" v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</p>
                <p class="fs24 c-fc-gray mb64 minh65 c-fw400" :class="currentObject.isShowAvatar==0 && currentObject.isShowNickName==1 ? 'mt30' : 'mt60'" v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</p>
              </div>
              <div class="hidden c-bg-white c-m-0auto c-p" :class="(ckFrom == 10 || ckFrom == 11 || ckFrom == 12) ? 'w340 h340': (ckFrom == 7 || ckFrom == 53) ? 'maxw510 h255':(ckFrom == 142) ? 'w340 maxh510':'w510 maxh340'">
                <img :src="$addXossFilter(spreadInfo.cover)" alt class="w100 img-pe-none">
                <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:36px;top: 40px;left:30px;font-weight: bolder;" class="c-pa c-fc-white">{{spreadInfo.shareTitle}}</div>
              </div>
              <div v-if="!isFromVip" class="mt30 c-wb-ba fs32 c-fw-b w510 c-m-0auto" ref="shareTitle7">
                <span class="c-textAlign-l">
                  {{ spreadInfo.shareTitle }}
                </span>
              </div>
              <div style="margin-left: 74px;">
                <p v-if="currentObject.lecturerName" class="mt20 c-fc-gray fs24 c-text-ellipsis1 w100 c-textAlign-l">
                  {{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</p>
                <p v-if="currentObject.isShowTime && currentObject.startAt" class="mt20 fs24 c-fc-gray  c-text-ellipsis1 w100 c-textAlign-l">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
                <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" class="mt25 c-fc-gray fs24 c-textAlign-l c-text-ellipsis1 lh-24 w507 c-m-0auto">
                  主办方: {{spreadInfo.organizer}}</p>
                <div class="w507 c-m-0auto mt25">
                  <p class="c-fc-gray fs24 c-textAlign-l c-text-ellipsis1" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间: {{spreadInfo.date}}</p>
                  <p class="c-fc-gray fs24 mt12 c-textAlign-l" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点: {{spreadInfo.place}}</p>
                </div>
              </div>
              <div class="w507 c-flex-row c-aligni-center c-justify-sb bottom-section8">
                <p>
                  <img :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-m-0auto img-pe-none">
                </p>
                <div class="c-flex-grow1 c-w0 c-ml20">
                  <p class="join fs26 c-fc-xblack c-textAlign-l mb30" ref="fromWhere8">{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
                  <div style="width:260px;height:54px;border-radius:30px;font-size:26px;background:#FF8900;margin-top:30px" class="c-flex-row c-flex-center c-fw600 c-fc-white">
                    <p>长按扫码查看详情</p>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="isShowCkjr" class="show-companyInfo">{{ showCkjrText }}</div>
          </div>
        </div>
      </div>

      <div class="invitation anvasContent" id="canvas8" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 8">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="canvasEight bgLocation ">
          <!-- 头像部分 -->
          <div v-if="currentObject.isShowAvatar==1 || currentObject.isShowNickName==1" class="c-flex-row c-aligni-center h120 avatar-bg pl20 pr40 c-pa c-p-l0">
            <p class="headerImg88 c-mr20">
              <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" alt class="c-brp50 w100 h100 img-pe-none">
            </p>
            <p v-if="currentObject.isShowNickName==1" class="fs28 c-fc-xblack h27">{{spreadInfo.nickname}}</p>
          </div>
          <div class="mt280 c-fstyle-i c-textAlign-c">
            <p class="fs28 c-fc-xblack mt30 mb40 h23 c-textAlign-c c-fw400" v-if="isCustom == 0">“{{currentObject.word}}”</p>
            <p class="fs28 c-fc-xblack mt30 mb40 h23 c-textAlign-c c-fw400" v-if="isCustom == 1 && currentObject.wordType == 1">“{{currentObject.word}}”</p>
            <p class="fs28 c-fc-xblack mt30 mb40 h23 c-textAlign-c c-fw400" v-if="isCustom == 1 && currentObject.wordType == 2">“{{currentObject.customWords}}”</p>
          </div>
          <div class="hidden c-bg-white c-m-0auto br10 c-p" :class="(ckFrom == 10 || ckFrom == 11 || ckFrom == 12) ? 'w300 h300': (ckFrom == 7 || ckFrom == 53) ? 'maxw450 h300':(ckFrom == 142) ? 'w300 maxh450':'w450 maxh300'">
            <img :src="$addXossFilter(spreadInfo.cover)" alt class="w100 img-pe-none br10">
            <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:36px;top: 40px;left:30px;font-weight: bolder;" class="c-pa c-fc-white">
              {{ spreadInfo.shareTitle }}
            </div>
          </div>
          <div v-if="!isFromVip" class="w510 c-wb-ba fs36 c-fc-xblack mt30 c-m-0auto" ref="shareTitle8">
            {{ spreadInfo.shareTitle }}
          </div>
          <div class="h65 c-fc-xblack mt25" style="margin-left: 120px;">
            <div v-if="currentObject.lecturerName"
              class="c-fc-xblack fs26 h40 c-text-ellipsis1 w100 c-textAlign-l c-flex-row">
              <div>{{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}</div>
              <div class="h40">{{currentObject.lecturerName}}</div>
            </div>
            <p v-if="currentObject.isShowTime && currentObject.startAt" class="mt20 fs24 c-fc-xblack  c-text-ellipsis1 w100 c-textAlign-l">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
            <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" class="fs24 c-text-ellipsis1 h23 lh-24 w507 c-m-0auto">主办方: {{spreadInfo.organizer}}</p>
            <div class="c-m-0auto w507">
              <p class="c-fc-gray fs24 c-text-ellipsis1" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间: {{spreadInfo.date}}</p>
              <p class="c-fc-gray fs24 mt12" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点: {{spreadInfo.place}}</p>
            </div>
          </div>
          <div class="w507 c-flex-row c-aligni-center c-justify-sb bottom-section8" style="bottom: 120px;">
            <p>
              <img :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-m-0auto img-pe-none">
            </p>
            <div class="c-flex-grow1 c-w0 c-ml20">
              <p class="join fs26 c-fc-xblack c-textAlign-l mb30" ref="fromWhere8">{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
              <div style="width:260px;height:54px;border-radius:30px;font-size:26px;background:#F6AE29;margin-top:30px" class="c-flex-row c-flex-center c-fw600 c-fc-white">
                <p>长按扫码查看详情</p>
              </div>
            </div>
          </div>
          <div v-if="isShowCkjr" class="show-companyInfo spread8-companyInfo">{{ showCkjrText }}</div>
        </div>
      </div>
      <!-- 新的系统默认图 -->
      <div class="invitation anvasContent" id="canvas9" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 9">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div style="width:614px;margin:0 auto;">
            <div style="width:108px;height:108px;margin:0 auto;margin-top:142px;">
              <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" class="c-brp50 img-pe-none" style="width:108px;height:108px;" alt="">
            </div>
            <div class="c-textAlign-c" style="margin-top:25px;font-size:28;color:#B62921;">
              <span v-if="currentObject.isShowNickName == 1" class="c-fw600 c-mr20">{{formatLength(spreadInfo.nickname, 5, 1)}}</span>
              <span v-if="isCustom == 0">{{currentObject.word}}</span>
              <span v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</span>
              <span v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</span>
            </div>
            <div class="hidden c-bg-white c-flex-row c-flex-center" :class="isFromVip ? 'br20' : ''" :style="'margin:0 auto;margin-top:35px;width:570px;border-top-right-radius:20px;border-top-left-radius:20px;height:' + (isFromVip ? '280px;' : '380px;')">
              <div class="hidden c-w100 c-h c-p c-flex-row c-flex-center">
                <canvas id="canvans9BgImg" class="c-pa c-p-t0 c-p-l0 c-pz1 c-w100 c-h c-pz1 c-object-fit-cover" style="z-index:0"></canvas>
                <img v-if="spreadInfo.cover" class="c-p c-pz1 img-pe-none" :style="newBannnerWidth + newBannnerHeight" :src="$addXossFilter(spreadInfo.cover)" alt="">
                <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:40px;top: 60px;left:40px;font-weight: bolder;" class="c-pa c-fc-white c-pz2">
                  {{formatLength(spreadInfo.shareTitle, 32)}}
                </div>
              </div>
            </div>
            <div v-if="!isFromVip" style="padding:17px 25px 19px 32px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;width:570px;margin:0 auto;" class="c-bg-white">
              <p style="font-size:32px;" class="c-fw600 c-wb-ba">
                {{formatLength(spreadInfo.shareTitle, 32)}}
              </p>
              <div v-if="currentObject.lecturerName" style="margin-top:20px;font-size:28px;" class="c-fc-sblack">
                <span>{{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</span>
              </div>
              <p v-if="currentObject.isShowTime && currentObject.startAt" style="margin-top:20px;font-size:28px;" class="c-fc-sblack">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
              <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" style="margin-top:20px;font-size:28px;" class="c-fc-sblack">
                主办方: {{spreadInfo.organizer}}</p>
              <div v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null" style="margin-top:22px;font-size:28px;color:#E02020;">
                <span v-if="spreadInfo.price && spreadInfo.price !=null" class="c-fw600">{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</span>&nbsp;
                <span class="c-fc-gray c-ml12" v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&& Number(spreadInfo.originalPrice) !=0">
                  原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</span>
              </div>
              <p style="margin-top:20px;font-size:28px;" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间:{{spreadInfo.date}}</p>
              <p style="margin-top:20px;font-size:28px;" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点:{{spreadInfo.place}}</p>
            </div>
            <div class="c-flex-row c-justify-center" style="width: 570px;margin:0 auto;margin-top:36px;">
              <div style="width:200px;height:200px;padding:15px;border-radius:14px;" class="c-bg-white">
                <img class="c-w100 c-h img-pe-none" :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt="">
              </div>
              <div class="c-flex-column c-justify-center c-flex-grow1 c-w0" style="border-radius:14px;margin-left:20px; width: 378px;">
                <div v-if="!(currentObject.companyNameType == 2 && !currentObject.customCompanyName)" :style="currentObject.companyNameType == 2 && !currentObject.customCompanyName ?'':'background:rgba(255,255,255,.9);'" class="c-text-hidden" style="border-radius:14px;padding:14px 25px;font-size:25px; height:140px;line-height:36px;">
                  <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
                </div>
                <div class="c-flex-row c-aligni-center" style="border-radius:50px;padding:25px; font-size:25px;margin-top:15px; height:36px; background:rgba(255,255,255,.9);line-height:36px;width: 260px">
                  <p>长按扫码查看详情</p>
                </div>
              </div>
            </div>
            <div v-if="isShowCkjr" class="c-flex-row c-flex-center c-pa c-p-l0 c-fc-white c-w100" style="bottom:35px;font-size:25px;">{{ showCkjrText }}</div>
          </div>
        </div>
      </div>
      <!-- 10 -->
      <div class="invitation anvasContent" id="canvas10" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 10">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div class="c-flex-row" style="padding:20px 60px 0 60px;margin-bottom:85px;">
            <div style="width:120px;height:120px;" class="c-brp50" >
              <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" class="c-brp50 img-pe-none" style="width:120px;height:120px;" alt="">
            </div>
            <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0" style="margin-left:18px;font-size:32px;color:#8E232D;">
              <div v-if="currentObject.isShowNickName == 1" class="c-fw600 c-mr20">{{spreadInfo.nickname}}</div>
              <div v-if="isCustom == 0">{{currentObject.word}}</div>
              <div v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</div>
              <div v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</div>
            </div>
          </div>
          <div style="width:570px;margin:0 auto;">
            <div class="hidden c-bg-white c-flex-row c-flex-center" :class="isFromVip ? 'br20' : ''"  :style="'margin:0 auto;margin-top:35px;width:570px;border-top-right-radius:20px;border-top-left-radius:20px;height:' + (isFromVip ? '280px;' : '380px;')">
              <div class="hidden c-w100 c-h c-p c-flex-row c-flex-center">
                <canvas id="canvans10BgImg" class="c-pa c-p-t0 c-p-l0 c-w100 c-h" style="z-index:0"></canvas>
                <img class="c-p c-pz1 img-pe-none c-object-fit-cover" :style="newBannnerWidth + newBannnerHeight" :src="$addXossFilter(spreadInfo.cover)" alt="">
                <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:40px;top: 60px;left:40px;font-weight: bolder;" class="c-pa c-pz2 c-fc-white">
                  {{formatLength(spreadInfo.shareTitle, 32)}}
                </div>
              </div>
            </div>
            <div v-if="!isFromVip" style="padding:17px 25px 15px 32px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;width:570px;margin:0 auto;background:#FC5A6F;">
              <p style="font-size:32px;" class="c-fw600 c-fc-white c-wb-ba">
                {{formatLength(spreadInfo.shareTitle, 32)}}
              </p>
            </div>
            <div v-if="currentObject.lecturerName" style="margin-top:25px;font-size:25px;color:#8E232D;">
              <span>{{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</span>
            </div>
            <p v-if="currentObject.isShowTime && currentObject.startAt" style="margin-top:18px;font-size:25px;color:#8E232D;">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
            <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" style="margin-top:18px;font-size:25px;color:#8E232D;">主办方: {{spreadInfo.organizer}}</p>
            <div v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null" style="margin-top:18px;font-size:25px;color:#E02020;">
              <span v-if="spreadInfo.price && spreadInfo.price !=null" class="c-fw600">{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</span>&nbsp;
              <span class="c-fc-gray c-ml12" v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&& Number(spreadInfo.originalPrice) !=0">
                原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</span>
            </div>
            <p style="margin-top:18px;font-size:25px;" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间:{{spreadInfo.date}}</p>
            <p style="margin-top:18px;font-size:25px;" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点:{{spreadInfo.place}}</p>
            <!-- <div class="spread_dashed"></div> -->
            <div class="c-flex-row c-justify-center c-w100" style="width: 560px;margin:0 auto; position: absolute; bottom: 310px; right: 85px">
              <div class="c-flex-grow1 c-w0 c-flex-column" style="color:#8E232D;font-size:25px; width: 392px;">
                <div class="c-text-hidden" style="height:70px;line-height:36px;">
                  <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}} </p>
                </div>
                <div style="padding-left: 150px;">
                  <div class="c-flex-row c-aligni-center" style="border-radius:50px; font-size:25px;margin-top:15px; color:#fff; background:#FC5A6F;border: 3px solid #8E232D; width: 260px; padding: 7px 20px;">
                    长按扫码查看详情
                  </div>
                </div>
              </div>
              <div style="margin-left:25px;">
                <img style="width: 140px; height: 140px;" class="c-w100 c-h img-pe-none" :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt="">
              </div>
            </div>
            <div v-if="isShowCkjr" class="c-flex-row c-flex-center c-pa c-p-l0 c-fc-white c-w100" style="bottom:37px;font-size:25px;">{{ showCkjrText }}</div>
          </div>
        </div>
      </div>
      <!-- 11 -->
      <div class="invitation anvasContent" id="canvas11" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 11">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div class="c-flex-row" style="padding:53px 57px 0 57px;margin-bottom:110px;">
            <div style="width:100px;height:100px;" class="c-brp50">
              <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" class="c-brp50 img-pe-none" style="width:100px;height:100px;" alt="">
            </div>
            <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0" style="margin-left:35px;font-size:32px;color:#fff;">
              <div v-if="currentObject.isShowNickName==1" class="c-fw600 c-mr20">{{spreadInfo.nickname}}</div>
              <div v-if="isCustom == 0">{{currentObject.word}}</div>
              <div v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</div>
              <div v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</div>
            </div>
          </div>
          <div class="hidden c-bg-white c-flex-row c-flex-center" :class="isFromVip ? 'br20' : ''" :style="'margin:0 auto;margin-top:35px;width:570px;border-radius:20px;height:' + (isFromVip ? '280px;' : '380px;')">
            <div class="hidden c-w100 c-h c-p c-flex-row c-flex-center">
              <canvas id="canvans11BgImg" class="c-pa c-p-t0 c-p-l0 c-w100 c-h" style="z-index:0"></canvas>
              <img class="c-p c-pz1 img-pe-none" :style="newBannnerWidth + newBannnerHeight" :src="$addXossFilter(spreadInfo.cover)" alt="">
              <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:40px;top: 60px;left:40px;font-weight: bolder;" class="c-pa c-pz2 c-fc-white">
                {{formatLength(spreadInfo.shareTitle,32)}}
              </div>
            </div>
          </div>
          <div style="width:570px;margin:0 auto;">
            <div v-if="!isFromVip" style="margin-top:25px;font-size:32px;" class="c-fw600 c-wb-ba">
              {{formatLength(spreadInfo.shareTitle,32)}}
            </div>
            <div v-if="currentObject.lecturerName" style="margin-top:30px;font-size:28px;" class="c-fc-sblack">
              <span>{{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</span>
            </div>
            <p v-if="currentObject.isShowTime && currentObject.startAt" style="margin-top:14px;font-size:28px;" class="c-fc-sblack">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
            <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" style="margin-top:30px;font-size:28px;" class="c-fc-sblack">主办方: {{spreadInfo.organizer}}</p>
            <div v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null" style="margin-top:30px;font-size:28px;color:#E02020;">
              <span v-if="spreadInfo.price && spreadInfo.price !=null" class="c-fw600">{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</span>&nbsp;
              <span class="c-fc-gray c-ml12" v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&& Number(spreadInfo.originalPrice) !=0">
                原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</span>
            </div>
            <p style="margin-top:14px;font-size:28px;" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间:{{spreadInfo.date}}</p>
            <p style="margin-top:14px;font-size:28px;" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点:{{spreadInfo.place}}</p>
            <div style="width:100%;height:4px;background:#C3BADA;margin-top:26px;"></div>
            <div style="position: absolute; bottom: 160px; right: 80px">
              <div class="c-flex-row" style="width: 560px;">
                <div class="c-flex-grow1 c-w0 c-flex-column c-fc-sblack" style="font-size:28px; margin-top: 10px">
                  <div class="c-text-hidden" style="height:120px;line-height:36px;">
                    <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
                  </div>
                  <div class="c-flex-row c-aligni-center" style="border-radius:50px;padding:25px; font-size:25px;margin-top:15px; color:#fff; height:36px; background:rgb(116, 81, 140);line-height:36px;width: 260px">
                    <p>长按扫码查看详情</p>
                  </div>
                </div>
                <div style="width:200px;height:200px;margin-left:28px;">
                  <img class="c-w100 c-h img-pe-none" :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt="">
                </div>
              </div>
            </div>
            <div v-if="isShowCkjr" class="c-flex-row c-flex-center c-pa c-p-l0 c-fc-white c-w100" style="bottom:35px;font-size:25px;">{{ showCkjrText }}</div>
          </div>
        </div>
      </div>
      <!-- 12 -->
      <div class="invitation anvasContent" id="canvas12" v-if="currentObject!= null && currentObject.cardType == 1 && modifyIndex == 12">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div class="c-flex-row" style="padding:196px 69px 0 69px;margin-bottom:25px;transform: rotate(-3deg);">
            <div style="width:100px;height:100px;" class="c-brp50">
              <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" class="c-brp50 img-pe-none" style="width:100px;height:100px;" alt="">
            </div>
            <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0 c-fc-black" style="margin-left:35px;font-size:32px;">
              <div v-if="currentObject.isShowNickName==1" class="c-fw600 c-mr20">{{spreadInfo.nickname}}</div>
              <div v-if="isCustom == 0">{{currentObject.word}}</div>
              <div v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</div>
              <div v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</div>
            </div>
          </div>
          <div style="width:570px;margin:0 auto;transform:rotate(-3deg);">
            <div style="width:100%;border-radius:20px;border:10px solid #000;background:#000;">
              <div class="hidden c-flex-row c-flex-center brt20 brl20" :style="'margin:0 auto;width:100%;height:' + (isFromVip ? '280px;' : '380px;')">
                <div class="hidden c-w100 c-h c-p c-flex-row c-flex-center">
                  <canvas id="canvans12BgImg" class="c-pa c-p-t0 c-p-l0 c-w100 c-h" style="z-index:0;border-radius:20px;"></canvas>
                  <img class="c-p c-pz1 img-pe-none" :style="newBannnerWidth + newBannnerHeight" :src="$addXossFilter(spreadInfo.cover)" alt="">
                  <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:40px;top: 60px;left:40px;font-weight: bolder;" class="c-pa c-pz2 c-fc-white">
                    {{formatLength(spreadInfo.shareTitle, 30)}}
                  </div>
                </div>
              </div>
              <div v-if="!isFromVip" style="padding:17px 25px 15px 32px;width:100%;margin:0 auto;background:#000;">
                <p style="font-size:32px;" class="c-fw600 c-fc-white c-wb-ba">
                  {{formatLength(spreadInfo.shareTitle, 30)}}
                </p>
              </div>
            </div>
            <div v-if="currentObject.lecturerName" style="margin-top:30px;font-size:25px;" class="c-fc-black">
              <span>{{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</span>
            </div>
            <p v-if="currentObject.isShowTime && currentObject.startAt" style="margin-top:14px;font-size:25px;" class="c-fc-black">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
            <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" style="margin-top:30px;font-size:25px;" class="c-fc-black">主办方: {{spreadInfo.organizer}}</p>
            <div v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null" style="margin-top:30px;font-size:25px;color:#E02020;">
              <span v-if="spreadInfo.price && spreadInfo.price !=null" class="c-fw600">{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</span>&nbsp;
              <span class="c-fc-gray c-ml12" v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&& Number(spreadInfo.originalPrice) !=0">
                原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</span>
            </div>
            <p style="margin-top:30px;font-size:25px;" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间:{{spreadInfo.date}}</p>
            <p style="margin-top:14px;font-size:25px;" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点:{{spreadInfo.place}}</p>
          </div>
          <div style="position: absolute; bottom: 130px; right: 70px; transform:rotate(-3deg);">
            <div class="spread_dashed_g"></div>
            <div class="c-flex-row" style="margin-top:32px;width:560px;">
              <div class="c-flex-grow1 c-w0 c-flex-column c-fc-black" style="font-size:28px;">
                <div class="c-text-hidden" style="height:140px;line-height:36px;">
                  <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
                </div>
                <div class="c-flex-row c-aligni-center" style="border-radius:50px;padding:25px; font-size:26px;margin-top:15px; color:#fff; height:36px; background:rgb(44, 44, 44);line-height:36px;width: 260px">
                  <p>长按扫码查看详情</p>
                </div>
              </div>
              <div style="width:200px;height:200px;margin-left:28px;">
                <img class="c-w100 c-h img-pe-none" :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt="">
              </div>
            </div>
          </div>
          <div v-if="isShowCkjr" class="c-flex-row c-flex-center c-pa c-p-l0 c-fc-white c-w100" style="bottom:35px;font-size:25px;">{{ showCkjrText }}</div>
        </div>
      </div>
      <!-- 13 -->
      <div class="invitation anvasContent" id="canvas13" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 13">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div class="c-flex-column c-flex-center" style="padding:25px 28px 0 28px;margin-bottom:32px;">
            <div style="width:120px;height:120px;" class="c-brp50">
              <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" class="c-brp50 img-pe-none" style="width:120px;height:120px;" alt="">
            </div>
            <div class="c-textAlign-c" style="margin-top:14px;font-size:32;color:#fff;">
              <span v-if="currentObject.isShowNickName==1" class="c-fw600 c-mr20" style="margin-right:10px;">{{spreadInfo.nickname}}</span>
              <span v-if="isCustom == 0">{{currentObject.word}}</span>
              <span v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</span>
              <span v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</span>
            </div>
          </div>
          <div style="width:628px;margin:0 auto;">
            <div style="border-radius:20px;width:628px;padding:35px 29px 33px 27px; height: 670px;" class="c-bg-white">
              <div class="c-flex-row c-flex-center" :style="'width:570px;margin:0 auto;height:' + (isFromVip ? '280px;' : '380px;')">
                <div class="hidden c-br20 c-w100 c-h c-p c-flex-row c-flex-center">
                  <canvas id="canvans13BgImg" class="c-pa c-p-t0 c-p-l0 c-w100 c-h" style="z-index:0"></canvas>
                  <img class="c-p c-pz1 img-pe-none" :style="newBannnerWidth + newBannnerHeight" :src="$addXossFilter(spreadInfo.cover)" alt="">
                  <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:40px;top: 60px;left:40px;font-weight: bolder;" class="c-pa c-pz2 c-fc-white">
                    {{formatLength(spreadInfo.shareTitle,34)}}
                  </div>
                </div>
              </div>
              <div v-if="!isFromVip" style="margin-top:18px;font-size:32px;" class="c-fw600 c-fc-black c-wb-ba">
                {{formatLength(spreadInfo.shareTitle,34)}}
              </div>
              <div v-if="currentObject.lecturerName" style="margin-top:20px;font-size:25px;" class="c-fc-sblack">
                <span>{{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</span>
              </div>
              <p v-if="currentObject.isShowTime && currentObject.startAt" style="margin-top:17px;font-size:25px;" class="c-fc-black">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
              <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" style="margin-top:20px;font-size:25px;" class="c-fc-black">
                主办方: {{spreadInfo.organizer}}</p>
              <div v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null" style="margin-top:30px;font-size:25px;color:#E02020;">
                <span v-if="spreadInfo.price && spreadInfo.price !=null" class="c-fw600">{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</span>&nbsp;
                <span class="c-fc-gray c-ml12" v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&& Number(spreadInfo.originalPrice) !=0">
                  原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</span>
              </div>
              <p style="margin-top:30px;font-size:25px;" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间:{{spreadInfo.date}}</p>
              <p style="margin-top:14px;font-size:25px;" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点:{{spreadInfo.place}}</p>
            </div>
          </div>
          <div style="width:628px;margin:0 auto; position: absolute; bottom: 160px; right: 60px">
            <div class="c-flex-row" style="margin-top:35px;border-radius:14px;background:rgba(255,255,255,.8);padding:15px 30px;">
              <div style="width:200px;height:200px;">
                <img class="c-w100 c-h img-pe-none" :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt="">
              </div>
              <div class="c-flex-grow1 c-w0 c-flex-column c-fc-black" style="font-size:28px;margin-left:30px;">
                <div class="c-text-hidden" style="height:130px;line-height:36px;">
                  <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
                </div>
                <div class="c-flex-row c-aligni-center" style="border-radius:50px;padding:25px; font-size:26px;margin-top:15px; color:#fff; height:36px; background:rgb(133, 105, 218);line-height:36px;width: 260px">
                  <p>长按扫码查看详情</p>
                </div>
              </div>
            </div>
          </div>
          <div v-if="isShowCkjr" class="c-flex-row c-flex-center c-pa c-p-l0 c-fc-white c-w100" style="bottom:35px;font-size:25px;">{{ showCkjrText }}</div>
        </div>
      </div>
      <!-- 15 -->
      <div class="invitation anvasContent" id="canvas15" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 15">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div class="c-flex-row" style="padding:50px 0 0 0;margin:0 auto;margin-bottom:46px;width:678px;">
            <div style="width:108px;height:108px;" class="c-brp50">
              <img v-if="currentObject.isShowAvatar==1":src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" class="c-brp50 img-pe-none" style="width:108px;height:108px;" alt="">
            </div>
            <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0" style="margin-left:35px;font-size:28px;color:#fff;padding:10px 0;">
              <div v-if="currentObject.isShowNickName==1" class="c-fw600 c-mr20">{{spreadInfo.nickname}}</div>
              <div v-if="isCustom == 0">{{currentObject.word}}</div>
              <div v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</div>
              <div v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</div>
            </div>
          </div>
          <div style="width:678px;margin:0 auto;border-radius:20px;">
            <div class="hidden c-bg-white c-flex-row c-flex-center" :style="'margin:0 auto;width:678px;border-top-right-radius:20px;border-top-left-radius:20px;height:' + (isFromVip ? 'auto;max-height: 452px;' : '452px;')">
              <div class="hidden c-w100 c-h c-p c-flex-row c-flex-center">
                <canvas id="canvans15BgImg" class="c-pa c-p-t0 c-p-l0 c-w100 c-h" style="z-index:0"></canvas>
                <img class="c-p c-pz1 img-pe-none" :style="newBannnerWidth678 + newBannnerHeight678" :src="$addXossFilter(spreadInfo.cover)" alt="">
                <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:40px;top: 60px;left:40px;font-weight: bolder;" class="c-pa c-pz2 c-fc-white">
                  {{formatLength(spreadInfo.shareTitle, 38)}}
                </div>
              </div>
            </div>
            <div style="padding:35px 30px 0 30px;">
              <p v-if="!isFromVip" style="font-size:32px;" class="c-fw600 c-fc-black c-wb-ba">
                {{formatLength(spreadInfo.shareTitle, 38)}}
              </p>
              <div v-if="currentObject.lecturerName" style="margin-top:20px;font-size:25px;" class="c-fc-sblack">
                <span>{{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</span>
              </div>
              <p v-if="currentObject.isShowTime && currentObject.startAt" style="margin-top:20px;font-size:25px;" class="c-fc-sblack">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
              <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" style="margin-top:20px;font-size:28px;" class="c-fc-sblack">
                主办方: {{spreadInfo.organizer}}</p>
              <div v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null" style="margin-top:20px;font-size:25px;color:#E02020;">
                <span v-if="spreadInfo.price && spreadInfo.price !=null" class="c-fw600">{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</span>&nbsp;
                <span class="c-fc-gray c-ml12" v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&& Number(spreadInfo.originalPrice) !=0">
                  原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</span>
              </div>
              <p style="margin-top:20px;font-size:25px;" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间:{{spreadInfo.date}}</p>
              <p style="margin-top:20px;font-size:25px;" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点:{{spreadInfo.place}}</p>
              <div style="width:628px;margin:0 auto; position: absolute; bottom: 160px; right: 60px">
                <div class="spread_green"></div>
                <div class="c-flex-row" style="margin-top:35px;border-radius:14px;background:rgba(255,255,255,.8);padding:15px 0">
                  <div style="width:200px;height:200px;">
                    <img class="c-w100 c-h img-pe-none" :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt="">
                  </div>
                  <div class="c-flex-grow1 c-w0 c-flex-column c-fc-black" style="font-size:28px;margin-left:20px;">
                    <div class="c-text-hidden" style="height:130px;line-height:36px;">
                      <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
                    </div>
                    <div class="c-flex-row c-aligni-center" style="border-radius:50px;padding:25px; font-size:26px;margin-top:15px; color:#fff; height:36px; background:#449364;line-height:36px;width: 260px">
                      <p>长按扫码查看详情</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="isShowCkjr" class="c-flex-row c-flex-center c-pa c-p-l0 c-fc-white c-w100" style="bottom:35px;font-size:25px;">{{ showCkjrText }}</div>
        </div>
      </div>
      <!-- 14 -->
      <div class="invitation anvasContent" id="canvas14" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 14">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation c-p">
          <div class="c-flex-row" style="padding:100px 0 0 0;margin:0 auto;margin-bottom:28px;width:606px;">
            <div style="width:108px;height:108px;" class="c-brp50">
              <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" class="c-brp50 img-pe-none" style="width:108px;height:108px;" alt="">
            </div>
            <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0" style="margin-left:35px;font-size:28px;color:#87520A;padding:10px 0;">
              <div v-if="currentObject.isShowNickName==1" class="c-fw600 c-mr20">
                {{spreadInfo.nickname}}
              </div>
              <div v-if="isCustom == 0">{{currentObject.word}}</div>
              <div v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</div>
              <div v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</div>
            </div>
          </div>
          <div style="width:606px;margin:0 auto;">
            <div class="hidden c-bg-white c-flex-row c-flex-center" :style="'margin:0 auto;width:606px;border-radius:20px;height:' + (isFromVip ? 'auto;max-height: 404px;' : '404px;border:5px solid #fff;')">
              <div class="hidden c-w100 c-h c-p c-flex-row c-flex-center">
                <canvas id="canvans14BgImg" class="c-pa c-p-t0 c-p-l0 c-w100 c-h" style="z-index:0"></canvas>
                <img class="c-p c-pz1 img-pe-none" :style="newBannnerWidth606 + newBannnerHeight606" :src="$addXossFilter(spreadInfo.cover)" alt="">
                <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="font-size:48px;top: 60px;left:40px;font-weight: bolder;" class="c-pa c-pz2 c-fc-white">
                  {{formatLength(spreadInfo.shareTitle,36)}}
                </div>
              </div>
            </div>
            <p v-if="!isFromVip" style="font-size:32px;margin-top:30px;color:#87520A;" class="c-fw600 c-wb-ba">
              {{formatLength(spreadInfo.shareTitle,36)}}
            </p>
            <div v-if="currentObject.lecturerName" style="margin-top:35px;font-size:25px;color:#87530B;">
              <span>{{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{currentObject.lecturerName}}</span>
            </div>
            <p v-if="currentObject.isShowTime && currentObject.startAt" style="margin-top:20px;font-size:25px;color:#87530B;">{{currentObject.startAtTit}}: {{currentObject.startAt}}</p>
            <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" style="margin-top:20px;font-size:25px;color:#87530B;">
              主办方: {{spreadInfo.organizer}}</p>
            <div v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null" style="margin-top:20px;font-size:25px;color:#E02020;">
              <span v-if="spreadInfo.price && spreadInfo.price !=null" class="c-fw600">{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</span>&nbsp;
              <span class="c-fc-gray c-ml12" v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&& Number(spreadInfo.originalPrice) !=0">
                原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</span>
            </div>
            <p style="margin-top:20px;font-size:25px;color:#87530B;" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间:{{spreadInfo.date}}</p>
            <p style="margin-top:20px;font-size:25px;color:#87530B;" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点:{{spreadInfo.place}}</p>
            <div class="spread_gray c-pa" style="width:606px; left: 72px; bottom: 400px"></div>
            <div class="c-flex-row c-pa" style="width:606px; left: 72px; bottom: 160px">
              <div style="width:200px;height:200px;" class="c-bg-white">
                <img class="c-w100 c-h img-pe-none" :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt="">
              </div>
              <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0" style="margin-left:20px;">
                <div class="c-text-hidden" style="font-size:25px;color:#87520A;line-height:36px;">
                  <p>{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
                </div>
                <div style="height:54px;border-radius:30px;font-size:25px;background:#87520A; width:260px;" class="c-flex-row c-flex-center c-fw600 c-fc-white">长按扫码查看详情</div>
              </div>
            </div>
          </div>
          <div v-if="isShowCkjr" class="c-flex-row c-flex-center c-pa c-p-l0 c-fc-white c-w100" style="bottom:35px;font-size:25px;">{{ showCkjrText }}</div>
        </div>
      </div>
      <!-- 16 -->
      <div class="invitation anvasContent" id="canvas16" v-if="currentObject != null && currentObject.cardType == 1 && modifyIndex == 16">
        <img :src="$addXossFilter(currentObject.bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div style="padding:44px 0 0 0;margin:0 auto;margin-bottom:46px;">
            <div class="c-flex-row c-aligni-center c-justify-center c-w100 c-hh160" style="height:160px;">
              <img v-if="currentObject.isShowAvatar==1" :src="$addXossFilter(spreadInfo.headimgurl, require('../../../assets/defult_head.png'))" class="c-brp50 img-pe-none" style="width:160px;height:160px;" alt="">
            </div>
            <div class="c-flex-column c-aligni-center c-justify-center c-w100 c-mt20" style="font-size: 36px">
              <div class="c-fc-white c-fw600 c-mr20 c-mb20 c-hh50">
                <span v-if="currentObject.isShowNickName==1">{{spreadInfo.nickname}}</span>
              </div>
              <div class="c-fc-white c-hh50">
                <span v-if="isCustom == 0">{{currentObject.word}}</span>
              </div>
              <div class="c-fc-white c-hh50">
                <span v-if="isCustom == 1 && currentObject.wordType == 1">{{currentObject.word}}</span>
              </div>
              <div class="c-fc-white c-hh50">
                <span v-if="isCustom == 1 && currentObject.wordType == 2">{{currentObject.customWords}}</span>
              </div>
            </div>
          </div>
          <div style="width:678px;margin:0 auto;border-radius:20px; margin-top: 20px">
            <div class="hidden c-flex-row c-flex-center c-p" :style="'padding: 20px 30px;margin-top: 20px;width:678px;border-top-right-radius:20px;border-top-left-radius:20px;height:' + (isFromVip ? 'auto;max-height: 452px;' : '452px;')">
              <div class="hidden c-w100 c-h c-p c-flex-row c-flex-center c-br30">
                <canvas id="canvans16BgImg" class="c-pa c-p-t0 c-p-l0 c-w100 c-h c-br30" style="z-index:0"></canvas>
                <img class="c-p c-pz1 img-pe-none" :style="newBannnerWidth678 + newBannnerHeight678" :src="$addXossFilter(spreadInfo.cover)" alt="">
                <div v-if="isFromVip" :style="'color:' + themeColor[spreadInfo.themeIndex]" style="top: 60px;left:40px;" class="c-pa c-pz2 c-fc-white c-fw-b c-fs40">
                  {{formatLength(spreadInfo.shareTitle, 38)}}
                </div>
              </div>
              <div class="c-pa c-p-r48 c-p-t36 c-pz10 ">
                <p class="c-bg-sblue c-fc-white c-fs28 c-ph20 c-br-bl20 c-br-tr32 c-pv10" style="font-size: 28px; ">{{currentObject.companyNameType == 2 ? currentObject.customCompanyName : spreadInfo.from}}</p>
              </div>
              <div class="c-pa c-p-l60 c-p-b40 c-pz10 c-flex-row c-flexw-wrap c-pv20 c-pl20">
                <div v-if="currentObject.lecturerName" style="margin-top:20px;display: flex;justify-content: center; align-items: center; font-size:22px; bottom: 10px; left: 10px; padding: 10px; margin-right:10px;" class="c-fc-white c-translucent-balck50 c-br50">
                  <span>{{spreadInfo.tag?spreadInfo.tag+': ':'讲师: '}}{{ formatLength(currentObject.lecturerName, 6, 1)}}</span>
                </div>
                <div v-if="currentObject.isShowTime && currentObject.startAt" style="margin-top:20px;display: flex;justify-content: center; align-items: center; padding: 10px;" class="c-fc-white c-translucent-balck50 c-br50">{{currentObject.startAt}}</div>
                <p v-if="spreadInfo.organizer && spreadInfo.organizer != '' && spreadInfo.organizer !=null" style="margin-top:20px;font-size:28px;padding: 10px; margin-right: 20px;" class="c-fc-white c-translucent-balck50 c-br50">
                  主办方: {{spreadInfo.organizer}}</p>
                <div v-if="ckFrom == 12 && spreadInfo.price && spreadInfo.price !=null" style="margin-top:20px;font-size:25px;color:#E02020; padding: 10px; margin-right: 20px;" class="c-fc-white c-translucent-balck50 c-br50">
                  <span v-if="spreadInfo.price && spreadInfo.price !=null" class="c-fw600">{{'￥' | iosPriceFilter}}{{spreadInfo.price}}</span>&nbsp;
                  <span class="c-ml12" v-if="spreadInfo.originalPrice && spreadInfo.originalPrice!= '' && spreadInfo.originalPrice !=null&& Number(spreadInfo.originalPrice) !=0">
                    原价: {{'￥' | iosPriceFilter}}{{spreadInfo.originalPrice}}</span>
                </div>
                <p style="margin-top:20px;font-size:25px;padding: 10px; margin-right: 20px;" class="c-fc-white c-translucent-balck50 c-br50" v-if="spreadInfo.date && spreadInfo.date != '' && spreadInfo.date !=null">时间:{{spreadInfo.date}}</p>
                <p style="margin-top:20px;font-size:25px;padding: 10px; margin-right: 20px;" class="c-fc-white c-translucent-balck50 c-br50" v-if="spreadInfo.place && spreadInfo.place != '' && spreadInfo.place !=null">地点:{{spreadInfo.place}}</p>
              </div>

            </div>
            <div style="padding:15px 30px 0 30px;">
              <div v-if="!isFromVip" class="c-fc-black c-wb-ba c-w100 c-hh120">
                <span style="font-size:32px;">
                  <!-- 19个中文换行 -->
                  {{formatLength(spreadInfo.shareTitle, 38)}}
                </span>
              </div>
              <div class="c-flex-row c-justify-center c-w100" style="margin-top: 40px">
                <div class="c-bg-white c-flex-row c-justify-center qrBgImg">
                  <img class="c-w100 c-h img-pe-none" style="padding: 22px 32px; width:220px;height: 200px"  :src="currentObject.redirect&&currentObject.redirect==3?$addXossFilter(currentObject.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt="">
                </div>
              </div>
              <div class="c-flex-row c-justify-center c-w100" style="margin-top: 10px">
                <div style="font-size:24px;" class="c-flex-row c-flex-center c-fc-xblack c-fs24">长按扫码查看详情</div>
              </div>
            </div>
          </div>
          <div v-if="isShowCkjr" class="c-flex-row c-flex-center c-pa c-p-l0 c-fc-white c-w100" style="bottom:20px;font-size:20px;">{{ showCkjrText }}</div>
        </div>
      </div>
    </div>
    <!-- 分享文案 -->
    <open-modal :openModal="showOpenModal" @closeModal="closeModal" :isShowText="true" :text="'分享给好友或者发布朋友圈时附上精美文案更有吸引力'">
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-text-hidden c-minh50vh c-maxh80vh c-flex-column">
        <div class="c-p c-flex-shrink0">
          <div class="c-w100 c-flex-row c-flex-center c-fs28 c-pt20 c-pb20 c-fc-xblack c-fw600">选择推荐语</div>
          <i @click="closeModal" class="iconfont  c-fc-gray c-fs24 c-pa c-p-r22 c-p-t22">&#xeca0;</i>
        </div>
        <div class="c-w100 c-bg-white c-contexty-scroll c-scroll-touch c-pb88 c-flex-grow1" id="scrollContent" @scroll="scrollContent($event)">
          <div class="c-w100 c-ph24 c-mt40">
            <div class="c-w100 c-fs24 c-fc-sblack c-br16 c-pv20 c-ph24" @click="handleClickSelect(item, index)" :class="[index == shareList.length - 1?'':'c-mb20', index == selectIndex ?'theme-bg-6 theme-fc c-fw-b theme-bd1':'bg-f2']" v-for="(item, index) in shareList" :key="index">{{item.word}}</div>
            <loading-status-tem :dataStatus="dataStatus" noDataText="暂无内容"></loading-status-tem>
          </div>
        </div>
        <div class="c-ph30 c-pv12 c-bg-white c-flex-row c-flex-center c-pa c-w100 c-p-b0 c-p-l0 copy_shadow" @click="handleClickCopy()">
          <div class="c-w100 c-hh64 c-flex-row c-flex-center c-fs22 c-fw600 c-fc-white c-br32 theme-bg">一键复制</div>
        </div>
      </div>
    </open-modal>
    <div class="masker img-pe-none" v-if="isShowMasker"></div>
    <share-masker :isShowShare="isShowShare" v-if="isShowShare" @closeShare="isShowShare=false;"></share-masker>
    <cj-popup v-model="showShareKnow" position="bottom" get-container="body" round>
      <section class="c-bg-white c-p c-ph100 c-textAlign-c">
        <div @click="showShareKnow = false" class="c-pa c-p-t0 c-p-r0 c-ph24 c-pt20">
          <i class="iconfont c-fs18 c-fc-gray">&#xe61b;</i>
        </div>
        <div class="c-fs30 c-fw400 c-pt50">邀请需知</div>
        <div class="c-fs28 c-pt70 c-pb100">
          <span>每成功邀请一位新友购买，可获得</span>
          <span class="c-fc-myellow" v-if="spreadInfo">支付金额的{{(spreadInfo.commissionRate * 1).toFixed(2)}}%</span>
          <span>作为奖励</span>
        </div>
      </section>
    </cj-popup>
    <share-mask :maskModel="showMoreShareModal" @handleClickMask="showMoreShareModal = false" :defaultTit="''" :txtContent="'点击屏幕右上角···，可以将本页分享给好友，或者分享到朋友圈'"></share-mask>
  </div>
</template>

<script>
// import { html2canvas } from '@/utils/html2canvas.js'
import ShareMasker from "@/components/templates/common/shareMasker.vue";
import ShareMask from "@/components/templates/common/shareMask.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
import { getUrlDetail } from "@/utils/goDetails.js";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import { reportPageShareSuccess } from "@/utils/userTraceLog.js";
const DEFULT_ACTIVITY_IMG = require("@/assets/activity_defult.png");
const DEFULT_EXAM_IMG = require("@/assets/examination_defult.png");
let bgList = [];
let extId = -1;
let html2canvas = null;
const LIMIT = 10;
let pageIndex = 1;
export default {
  name: "SpreadCustom",
  components: {
    ShareMasker,
    ShareMask,
    OpenModal,
    loadingStatusTem
  },
  data() {
    return {
      isFaShou: localStorage.getItem("isFaShou") == 1,
      showMoreShareModal: false,
      showShareKnow: false,
      spreadInfo: null,
      speadImgList: [],
      curIndex: 0,
      ckFrom: "",
      cId: 0,
      qrcodeStyle: "",
      userType: "",
      isCustom: "",
      content: [],
      wordColor: "",
      isShowShare: false,
      default: "",
      chooseIndex:'',
      isShowMasker: false,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      cfg: JSON.parse(localStorage.getItem("cfg")),
      distribution: '',
      isNoSale: false,
      bindPhoneSetting: null,
      promote: 0, //是否来自分享收益
      showOpenModal: false,
      dataStatus: 'HAS_MORE_DATA',
      shareList: [],
      selectIndex: 0,
      copyTtex: '',
      modifyIndex: 0,
      currentObject: null,
      promoteObject: null,
      ratioType: '',
      cmpId: '', // 来自升级会员邀请卡会员得camId
      isFromChain: false,
      shortLink: '',
      enableChainModel: false,
      prodMapType: global.prodMapType,
      themeColor: ['rgba(142, 86, 41, 1)', 'rgba(255, 220, 153, 1)', 'rgba(24, 39, 64, 1)', 'rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)', 'rgba(255, 237, 206, 1)'],
    };
  },
  computed: {
    isShowCkjr() {
      let isShow = this.companyAuth && (this.companyAuth.enableShowInfo == 1 || (this.companyAuth.liveAnnual == 1 && (this.ckFrom == 51 || this.ckFrom == 180 || this.ckFrom == 115)) || this.distribution == 1);
      return isShow;
    },
    showCkjrText() {
      if (!this.companyAuth) {
        return '';
      }
      let returnStr = (this.companyAuth.liveAnnual == 1 && (this.ckFrom == 51 || this.ckFrom == 180 || this.ckFrom == 115)) || (this.companyAuth.enableShowInfo == 1 && !this.companyAuth.instruction) || this.distribution == 1 ? '创客匠人技术支持' : this.companyAuth.instruction;
      return returnStr;
    },
    isShowPromote() {
      let isShow = false;
      const commonRaito = this.$route.query.shareholderId ? this.promoteObject.ratio : this.promoteObject.commonRaito;
      if (this.enableChainModel) {
        return false
      } else if (this.ckFrom == global.ckFrom.vip || this.ckFrom == global.ckFrom.reservation || this.ckFrom == global.ckFrom.svip || this.ckFrom == global.ckFrom.shopping || this.ckFrom == global.ckFrom.activity) {
        isShow = commonRaito > 0 && this.promoteObject.price > 0;
        return isShow;
      } else if (this.ckFrom == global.ckFrom.edu || this.ckFrom == global.ckFrom.eduInviteCard) {
        return isShow;
      } else {
        isShow = commonRaito > 0 && (this.promoteObject.payType == 2 || this.promoteObject.payType == 4);
        return isShow;
      }
    },
    isFromVip() {
      return this.ckFrom == global.ckFrom.vip || this.ckFrom == global.ckFrom.svip
    },
    newBannnerWidth606() {
       const bannerMap = {
       10:'width:auto;',
        11:'width:auto;',
        12:'width:auto;',
        142:'width:auto;',
      }
      return bannerMap[this.ckFrom] || `width:606px;`;
    },
    //商城1:1 定高，宽度自适应 电子书2:3 定高 宽度自适应，其他 定宽，高度自适应
    newBannnerHeight606() {
      const bannerMap = {
        10:'height:404px;',
        11:'height:404px;',
        12:'height:404px;',
        142:'height:404px;',
      }
      return bannerMap[this.ckFrom] || `height:auto;max-height:404px;`;
    },
    newBannnerWidth678() {
       const bannerMap = {
        10:'width:auto;',
        11:'width:auto;',
        12:'width:auto;',
        142:'width:auto;',
      }
      return bannerMap[this.ckFrom] || `width:678px;`;
    },
    //商城1:1 定高，宽度自适应 电子书2:3 定高 宽度自适应，其他 定宽，高度自适应
    newBannnerHeight678() {
      const bannerMap = {
        10:'height:452px;',
        11:'height:452px;',
        12:'height:452px;',
        142:'height:452px;',
      }
      return bannerMap[this.ckFrom] || `height:auto;max-height:452px;`;
    },
    //商城1:1 定高，宽度自适应 电子书2:3 定高 宽度自适应，其他 定宽，高度自适应
    newBannnerWidth() {
       const bannerMap = {
        10:'width:auto;',
        11:'width:auto;',
        12:'width:auto;',
        142:'width:auto;',
      }
      return bannerMap[this.ckFrom] || `width:570px;`;
    },
    //商城1:1 定高，宽度自适应 电子书2:3 定高 宽度自适应，其他 定宽，高度自适应
    newBannnerHeight() {
      const bannerMap = {
        10:'height:380px;',
        11:'height:380px;',
        12:'height:380px;',
        142:'height:380px;',
      }
      return bannerMap[this.ckFrom] || `height:auto;max-height:380px;`;
    },
    promoteObjectPrice() {
      let price = '';
      if (this.$route.query.shareholderId) {
        price = ((this.promoteObject.price * this.promoteObject.ratio) / 100).toFixed(2)
      } else {
        price = ((this.promoteObject.price * this.promoteObject.commonRaito) / 100).toFixed(2)
      }
      return price
    }
  },
  watch: {
    showOpenModal(val) {
      if (val) {
        pageIndex = 1
        this.getShareWordList()
      }
    }
  },
  created() {
    this._shareTitle = "";
    this._fromWhere = "";
    utilJs.appShare(this);
  },
  methods: {
    // 超出显示省略号
    formatLength(val, len, l = 2 ) {
      return val.length <= len ? val : val.substring(0, len - 2) + '...';
    },
    setFormatLenth(val, len) {
      return val.length <= len ? val : val.substring(0, len - 1) + '...';
    },
    touchStartImg() {
      clearTimeout(this._touchTimeCon);
      this._touchTimeCon = setTimeout(() => {
        reportPageShareSuccess(this._shareUrl);
      }, 250);
    },
    touchEndImg() {
      clearTimeout(this._touchTimeCon );
      this._touchTimeCon = null;
    },
    getPromoteUserInfo() {
      utilJs.getMethod(`${global.apiurl}promote/promoteUserInfo`, res => {
        this.ratioType = res.ratioType;
      });
    },
    getPromote() {
      let cmpId = this.cmpId == '' ? extId : this.cmpId;
      let prodId = this.ckFrom == global.ckFrom.course ? this.cId : (this.ckFrom == global.ckFrom.vip || this.ckFrom == global.ckFrom.svip) ? cmpId : extId;
      let prodType = this.ckFrom == global.ckFrom.eduInviteCard ? 116 : this.ckFrom;
      let url = this.isFromChain ? `${global.apiurl}chainProds/getChainProdList?prodType=${prodType}&prodId=${prodId}&page=1&limit=10` : this.$route.query.shareholderId ? `${global.apiurl}shareholder/shareholderCourseList?prodType=${prodType}&prodId=${prodId}&limit=1&page=1` : `${global.apiurl}promote/list?prodType=${this.distribution == 1 ? global.ckFrom.distributionColumnPay : prodType}&prodId=${prodId}&limit=1&page=1`
      utilJs.getMethod(url, res => {
        if (this.isFromChain) {
          this.promoteObject = res.data && res.data.data && res.data.data.length > 0 && res.data.data[0];
        } else {
          this.promoteObject = res.data && res.data.length > 0 && res.data[0];
        }
      })
    },
    scrollContent() {
      let element = document.getElementById('scrollContent');
      utilJs.elementLoading(element, () => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.shareList.length > 0) {
          this.getShareWordList();
        }
      })
    },
    handleClickSelect(item, index) {
      if (index == this.selectIndex) return;
      this.selectIndex = index;
      this.copyTtex = item.word;
    },
    copyShortLink() {
      if (!this.shortLink)
        return;
      let copyContent = `${this.spreadInfo.nickname}邀请你学习${this.prodMapType[this.ckFrom]}【${this.spreadInfo.shareTitle}】，点击进入查看${this.shortLink}`
      utilJs.copyText(copyContent);
      reportPageShareSuccess(this._shareUrl);
    },
    handleClickShareOpenModal() {
      this.showOpenModal = true;
    },
    // 获取分享文案
    getShareWordList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let cmpId = this.cmpId == '' ? extId : this.cmpId;
      let prodId = this.ckFrom == global.ckFrom.course ? this.cId : (this.ckFrom == global.ckFrom.vip || this.ckFrom == global.ckFrom.svip) ? cmpId : extId;
      utilJs.getMethod(global.apiurl + `common/getShareWordList?page=${pageIndex}&limit=${LIMIT}&prodType=${this.ckFrom}&prodId=${prodId}`, res => {
        if (pageIndex == 1) {
          this.shareList = res.data || [];
          this.shareList.forEach((element, index) => {
            if (this.selectIndex == index) {
              this.copyTtex = element.word
            }
          });
        } else {
          this.shareList = [...this.shareList, ...res.data]
        }
        if (res.data && (res.data.length < LIMIT)) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA'
        } else {
          this.dataStatus = 'HAS_MORE_DATA'
          pageIndex++
        }
      })
    },
    handleClickCopy() {
      utilJs.copyText(this.copyTtex);
    },
    closeModal() {
      this.showOpenModal = false;
    },
    clickMoreShare() {
      this.showMoreShareModal = true;
    },
    clickGoBack() {
      this.$router.go(-1);
    },
    clickChangeImg(modifyIndex, index, item) {
      console.log(modifyIndex, 'modifyIndex', item)
      console.timeEnd('renderSpreadInfoDomTime')
      console.time('renderSpreadInfoDomTime2')
      this.currentObject = item;
      this.modifyIndex = modifyIndex <= 0 ? 0 : modifyIndex;
      // 判断是自定义
      if (item.cardType == 2) {
        this.userType = item.userType;
        this.qrcodeStyle = item.qrcodeStyle;
        this.wordColor = item.wordColor;
      }
      this.isShowMasker = true;
      document.querySelector("#spreadImg img").setAttribute("src", this.$addXossFilter(this.content[index].bgImage));
      let hasSpreadArr = this.speadImgList.filter(item => item.index == index);
      this.curIndex = index;
      if (hasSpreadArr.length > 0) {
        document.querySelector("#spreadImg img").setAttribute("src", this.$addXossFilter(hasSpreadArr[0].src));
        this.isShowMasker = false;
        this.currentObject = null;
        return;
      }
      this.setClinetHeight();
      this.$loading.show({
        text: "邀请卡生成中"
      });
      document.ontouchstart = null;
      document.ontuchmove = null;
      document.ontouchend = null;
      this.$nextTick(() => {
        if (item.cardType != 2) {
          this._substrTxt(this.modifyIndex);
        }
        this.canvas(this.modifyIndex, index);
      });
    },
    async canvas(modifyIndex, index) {
      let domTest = document.getElementById("canvas" + modifyIndex);
      if (!domTest) {
        return;
      }
      console.timeEnd('renderSpreadInfoDomTime2')
      console.time('html2canvasBannerTime')
      await this.setCanvasBg(modifyIndex);
      console.timeEnd('html2canvasBannerTime')
      console.time('html2canvasTime')
      html2canvas(domTest, {
        useCORS: true,
        height: domTest.offsetHeight, // 解决当前页面生成图片出现白边问题
        width: domTest.offsetWidth,
      }).then(canvas => {// eslint-disable-line
        // document.body.appendChild(canvas);
         console.timeEnd('html2canvasTime')
         console.time('ToImageTime')
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
    getSpreadInfo() {
      let getUrl = `${global.apiurl}common/inviteShow?cId=${this.cId}&extId=${extId}&ckFrom=${this.ckFrom}&promote=${this.promote}&isApp=${localStorage.getItem('isWxApp') && localStorage.getItem('isWxApp') == 1 ? 1 : 0}`
      if (this.distribution == 1) {
        getUrl = `${global.apiurl}common/inviteShow?cId=${this.cId}&extId=${extId}&ckFrom=${global.ckFrom.distributionColumnPay}&promote=${this.promote}&isApp=${localStorage.getItem('isWxApp') && localStorage.getItem('isWxApp') == 1 ? 1 : 0}`;
      }
      if (this.$route.query.shareholderId) { //股东分享，要带股东id
        getUrl += `&shareholderId=${this.$route.query.shareholderId}`
      }
      if (sessionStorage.getItem('promotedAccountId')) {
        getUrl += `&promotedAccountId=${sessionStorage.getItem('promotedAccountId')}`
      }
      utilJs.getMethod(getUrl, res => {
        console.timeEnd('getSpreadInfoTime')
        console.time('renderSpreadInfoDomTime')
        res.lecturerName = res.lecturerName ? res.lecturerName.replace(/^\s+|\s+$/g, '') : '';
        let coverImg = res.banner;
        if (!res.banner && this.ckFrom == global.ckFrom.activity) {
          coverImg = DEFULT_ACTIVITY_IMG;
        } else if (!res.banner && this.ckFrom == global.ckFrom.exam) {
          coverImg = DEFULT_EXAM_IMG;
        } else if (this.ckFrom == global.ckFrom.vip || this.ckFrom == global.ckFrom.svip) {
          // if (res.coverInfo && res.coverInfo.coverType == 2) {
          coverImg = res.coverInfo.coverUrl;
          // }
        }
        //enableChainModel: 链动2+1的商品都不展示推广收益（本来链动2+1推广赚钱列表进来要展示，后来因为需要判断身份，暂时不展示了）
        this.enableChainModel = res.enableChainModel && this.ckFrom == global.ckFrom.shopping;
        this.shortLink = res.linkUrl;
        this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
        this.spreadInfo = {
          deductibleAfterInvition: res.deductibleAfterInvition,
          // lecturerName: res.lecturerName ? res.lecturerName.substr(0, 20) : "",
          date: res.date || "",
          place: res.place.length > 40 ? res.place.substr(0, 36) + '...' : res.place.substr(0, 43) || '',
          originalPrice: res.originalPrice || "",
          price: res.price || "",
          hasBought: res.hasBought,
          isInvite: res.isInvite,
          hasPermission: res.hasPermission || "",
          organizer: res.organizer || "",
          commission: res.commission || 0,
          commissionRate: res.commissionRate || 0,
          wordColor: res.fontColor,
          shareTitle: res.title,
          // startAt: res.startAt || "",
          shareDesc: res.shareDesc,
          tag: res.tag,
          headimgurl:
            this.$addXossFilter(res.avatar) || require("../../../assets/defult_head.png"),
          nickname: res.nickname,
          cover: coverImg,
          from: localStorage.getItem("companyName"),
          qrcodeImg: localStorage.getItem('isWxApp') && localStorage.getItem('isWxApp') == 1 ? res.qrcodeUrl : "data:image/svg+xml;base64," + window.btoa(decodeURIComponent(encodeURIComponent(res.qrcodeUrl))),
          isSaleOnly: res.isSaleOnly,
          payType: res.payType,
          themeIndex: res.backcolor ? (Number(res.backcolor) - 1) : 0
        };
        this._shareTitle = res.title;

        this._fromWhere = this.spreadInfo.from;
        bgList = res.custom.data.content;
        let hideposter = bgList.every(item => !item.isShowPoster);
        let firstIndex = bgList.findIndex(item => { return !!item.isShowPoster });
        if (bgList.length <= 0 || hideposter) {
          this.$showCjToast({
            text: "暂无数据",
            type: "warn",
          });
          return;
        }
        this.isCustom = res.custom.isCustom;
        this.wordColor = res.custom.data.content[0].wordColor;
        this.content = bgList;

        // this.content = this.content.filter(i => (i.modifyIndex != 16 || i.modifyIndex != 17) )

        this.curIndex = firstIndex || 0;
        this.content.forEach((item, index) => {
          if (this.curIndex == index) {
            this.currentObject = item;
            if (item.modifyIndex <= 0) {
              this.modifyIndex = 0
            } else {
              this.modifyIndex = item.modifyIndex
            }
          }
          // 判断是自定义
          if (item.cardType == 2) {
            this.userType = item.userType;
            this.qrcodeStyle = item.qrcodeStyle;
            this.wordColor = item.wordColor;
            if (item.bgLayer && item.bgLayer.length > 0) {
              for (let i = 0; i < item.bgLayer.length; i++) {
                item.bgLayer[i].height = item.bgLayer[i].height * 3 + 'px'
                item.bgLayer[i].width = item.bgLayer[i].width * 3 + 'px'
                item.bgLayer[i].lineHeight = item.bgLayer[i].lineHeight * 3 + 'px'
                item.bgLayer[i].left = item.bgLayer[i].posX * 3 + 'px'
                item.bgLayer[i].top = item.bgLayer[i].posY * 3 + 'px'
                item.bgLayer[i].fontSize = item.bgLayer[i].size * 3 + 'px'
                item.bgLayer[i].letterSpacing = item.bgLayer[i].letterSpacing * 3 + 'px'
              }
            }
          }
          // 直播特殊处理-设置讲师的名字(直播特殊处理) lecturerName和startAt赋值到每个item(因为直播间新增自定义，避免页面过多逻辑)
          if ([51, 180].includes(this.ckFrom * 1) && item.lecturerNameObj && Object.prototype.toString.call(item.lecturerNameObj) == '[object Object]') {
            if (item.lecturerNameObj.type == 3) {
              // 不显示
              item.lecturerName = '';
            } else if (item.lecturerNameObj.type == 2) {
              // 自定义显示
              item.lecturerName = item.lecturerNameObj.lecturerName;
            } else {
              item.lecturerName = item.lecturerNameObj.lecturerName.substr(0, 20);
            }
            if ([3, 5, 7, 8].includes(item.modifyIndex)) {
              item.lecturerName = item.lecturerNameObj.lecturerName.substr(0, 20);
            }
          } else {
            item.lecturerName = res.lecturerName.substr(0, 20);
          }
          // 设置开始时间（直播特殊处理）
          item.startAt = res.startAt;
          if ([51, 180].includes(this.ckFrom * 1)) {
            item.startAtTit = "开播时间";
            if (item.startAtObj && Object.prototype.toString.call(item.startAtObj) == '[object Object]') {
              if (item.startAtObj.type == 3) {
                item.startAt = null;
              } else if (item.startAtObj.type == 2) {
                // 自定义显示
                item.startAt = item.startAtObj.startAt;
              }
            }
          } else {
            item.startAtTit = "时间";
          }
        })
        this.clickChangeImg(this.modifyIndex, this.curIndex, this.currentObject);
        this.$nextTick(() => {
          this.wechatShare();
        });
      }
      );
    },
    loadBannerImg() {
      return new Promise(resolve => {
        if (this._bannerBgImg) {
          return resolve();
        };
        const IMG = new Image();
        IMG.crossOrigin = '*'; //需要图片跨域支持
        IMG.onload = () => {
          this._bannerBgImg = IMG;
          resolve(IMG)
        }
        let url = this.$addXossFilter(this.spreadInfo.cover);
        url = url.includes('?') ? `${url}&time=${Date.now()}` : `${url}?time=${Date.now()}`
        IMG.src = url;
      })
    },
    async setCanvasBg(index) {
      const CANVAS = document.getElementById(`canvans${index}BgImg`);
      //商城和电子书的封面需要高斯模糊处理
      if (!CANVAS) {
        return Promise.resolve();
      }
      await this.loadBannerImg()
      return new Promise(resolve => {
        let ctx = CANVAS.getContext('2d');
        ctx.drawImage(this._bannerBgImg, -10, -10, 570, 380);
        //提取图片信息
        let d = ctx.getImageData(0, 0, 570, 380);
        //进行高斯模糊
        let gd = this.gaussBlur(d, 15, 0);
        //绘制模糊图像
        ctx.putImageData(gd, 0, 0);
        resolve()
      })

    },
    gaussBlur(imgData, radius) {
    radius *= 3;//不知为什么,我的模糊半径是 css中 filter:bulr 值的三倍时效果才一致。
    //Copy图片内容
    let pixes = new Uint8ClampedArray(imgData.data);
    const width = imgData.width;
    const height = imgData.height;
    let gaussMatrix = [],
        gaussSum,
        x, y,
        r, g, b, a,
        i, j, k,
        w;
    radius = Math.floor(radius);
    const sigma = radius / 3;

    a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
    b = -1 / (2 * sigma * sigma);

    //生成高斯矩阵
    for (i = -radius; i <= radius; i++) {
        gaussMatrix.push(a * Math.exp(b * i * i));
    }

    //x 方向一维高斯运算
    for (y = 0; y < height; y++) {
        for (x = 0; x < width; x++) {
            r = g = b = a = gaussSum = 0;
            for (j = -radius; j <= radius; j++) {
                k = x + j;
                if (k >= 0 && k < width) {
                    i = (y * width + k) * 4;
                    w = gaussMatrix[j + radius];

                    r += pixes[i] * w;
                    g += pixes[i + 1] * w;
                    b += pixes[i + 2] * w;
                    a += pixes[i + 3] * w;

                    gaussSum += w;
                }
            }

            i = (y * width + x) * 4;
            //计算加权均值
            imgData.data.set([r, g, b, a].map(v => v / gaussSum), i);
        }
    }

    pixes.set(imgData.data);

    //y 方向一维高斯运算
    for (x = 0; x < width; x++) {
        for (y = 0; y < height; y++) {
            r = g = b = a = gaussSum = 0;
            for (j = -radius; j <= radius; j++) {
                k = y + j;

                if (k >= 0 && k < height) {
                    i = (k * width + x) * 4;
                    w = gaussMatrix[j + radius];

                    r += pixes[i] * w;
                    g += pixes[i + 1] * w;
                    b += pixes[i + 2] * w;
                    a += pixes[i + 3] * w;

                    gaussSum += w;
                }
            }
            i = (y * width + x) * 4;
            imgData.data.set([r, g, b, a].map(v => v / gaussSum), i);
        }
    }

    return imgData;
},

    //立即购买，商家设置了邀请卡减免多少钱，可以享受邀请卡优惠
    clickBuyNow: function () {
      if (!utilJs.isOpenIosGzhPay(this.ckFrom)) {
        this.$store.commit('updateShowVitualModal', true);
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMible()) {
        return;
      }
      let ckFrom = this.ckFrom;
      let cId = this.cId;
      this.$routerGo(this, "push", {
        path: "/homePage/course/coursePay",
        query: { cId: cId, extId: extId, ckFrom: ckFrom, isFromInvite: 1 }
      });
    },
    setClinetHeight() {
      this.$nextTick(() => {
        let windowHeight = window.innerHeight;
        let footer = this.$refs.footer.clientHeight;
        let spreadImgHeight = windowHeight - footer;
        // let spreadImgTxtHeight = document.querySelector("#spreadImgTxt").clientHeight;
        // let spreadImgPromoteHeight = document.querySelector("#spreadImgPromote") && document.querySelector("#spreadImgPromote").clientHeight || 0;
        let spreadConHeight = document.querySelector("#spreadCon") && document.querySelector("#spreadCon").clientHeight;
        let fontSize = Number(document.documentElement.style.fontSize.replace(/px$/, ''));
        let marginTop = (20 / 40) * fontSize;
        console.log(spreadImgHeight)
        document.querySelector("#spreadImg").style.height = spreadImgHeight + 'px';
        document.querySelector("#spreadImg img").style.marginTop = marginTop + 'px';
        document.querySelector("#spreadImg img").style.height = (spreadImgHeight - spreadConHeight - marginTop) + 'px';
        document.querySelector("#spreadImg img").style.width = (spreadImgHeight - spreadConHeight - marginTop) * 750 / 1334 + 'px';
      })
    },
    canvasToImage(ctx) {
      try {
        // let dataURL = ctx.canvas.toDataURL("image/jpg");
        let dataURL = ctx.canvas.toDataURL("image/png?x-oss-process=style/common");
        document.querySelector("#spreadImg").innerHTML = '';
        document.querySelector("#spreadImg").innerHTML = `<img src="${dataURL}" class="c-br20 app-save-img c-m-0auto" alt>`;
        this.setClinetHeight();
        // document.getElementById("spreadImg").setAttribute("src", dataURL);
        let spreadItem = {
          index: this.curIndex,
          src: dataURL
        };
        this.speadImgList.push(spreadItem);
        document.ontouchstart = true;
        document.ontuchmove = true;
        document.ontouchend = true;
        if (this.content.length == 2) {
          this.content = bgList;
        }
        console.timeEnd('ToImageTime')
        setTimeout(() => {
          this.$loading.hide();
          this.currentObject = null;
          this.isShowMasker = false;
        }, 1000);
      } catch (err) {
        this.$loading.hide();
      }
    },
    //分享
    wechatShare: function () {
      let title =
        (this.spreadInfo && this.spreadInfo.shareTitle) || window.localStorage.getItem("shareTitle");
      let shareImg =
        (this.spreadInfo && this.spreadInfo.cover) || window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0];
      let prodId = this.ckFrom == global.ckFrom.course ? this.cId : extId;
      let cf = this.ckFrom == global.ckFrom.eduInviteCard ? global.ckFrom.edu : this.ckFrom
      let query = {
        ckFrom: cf,
        refereeId: localStorage.getItem("userId")
      }
      if (this.ckFrom == global.ckFrom.column) {
        query.distribution = this.distribution;
        query.cId = this.cId;
      }
      if (this.$route.query.shareholderId) { //面授课的股东推广
        query.shareholderId = this.$route.query.shareholderId;
      }
      if (this.isFromChain) {
        query.fromChain = 'true'
      }
      let courseType = this.$route.query.courseType || '';
      if (cf == global.ckFrom.vip || cf == global.ckFrom.svip) {
        shareUrl += '#' + `/member/vip/vipDetail?refereeId=${localStorage.getItem("userId")}&type=${cf}` + (this.cmpId ? `&fromCmpId=${this.cmpId}` : '')
      } else {
        shareUrl += '#' + getUrlDetail(cf, prodId, query, courseType);
      }
      let shareDesc = (this.spreadInfo && this.spreadInfo.shareDesc) || "查看详情";
      this._shareUrl = shareUrl;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, (res) => {
        if (!this.distribution && (this.ckFrom == global.ckFrom.course || this.ckFrom == global.ckFrom.column)) {
          this.inviteCallback();
        }
      });
    },
    //手机端分享
    appShare: function () {
      let title =
        this.spreadInfo.shareTitle || window.localStorage.getItem("shareTitle");
      let shareImg =
        this.spreadInfo.cover || window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0];
      let prodId = this.ckFrom == global.ckFrom.course ? this.cId : extId;
      let cf = this.ckFrom == global.ckFrom.eduInviteCard ? global.ckFrom.edu : this.ckFrom
      let query = {
        ckFrom: cf,
        refereeId: localStorage.getItem("userId")
      }
      if (this.ckFrom == global.ckFrom.column) {
        query.distribution = this.distribution;
        query.cId = this.cId;
      }
      if (this.$route.query.shareholderId) { //面授课的股东推广
        query.shareholderId = this.$route.query.shareholderId;
      }
      if (this.isFromChain) {
        query.fromChain = 'true'
      }
      let courseType = this.$route.query.courseType || '';
      if (cf == global.ckFrom.vip || cf == global.ckFrom.svip) {
        shareUrl += '#' + `/member/vip/vipDetail?refereeId=${localStorage.getItem("userId")}&type=${cf}` + (this.cmpId ? `&fromCmpId=${this.cmpId}` : '')
      } else {
        shareUrl += '#' + getUrlDetail(cf, prodId, query, courseType);
      }
      let shareDesc = this.spreadInfo.shareDesc || "查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    //邀请卡分享回调方法
    inviteCallback: function () {
      let data = {
        ckFrom: this.ckFrom,
        extId: extId,
        cId: this.cId
      };
      utilJs.postMethod(global.apiurl + "common/inviteCallback", data, res => {
        this.isShowShare = false;
        this.$set(this.spreadInfo, "isInvite", true);
      });
    },
    /**
     * @描述: 根据模板截取显示文字
     * @index {String} 传入当前模板索引
     * @返回 {undefined} 无
     */
    _substrTxt: function (index) {
      let shareTitSeatId = "J_sharetit-seat";
      let fromWhereSeatId = "J_fromwhere-seat";
      let idx = Number(index);
      let fromWhere = "来自「" + this._fromWhere + "」";
      let fromWhereElem = this.$refs["fromWhere" + idx];
      let shareTitElem = this.$refs["shareTitle" + idx];
      let isShowStartTime = (this.currentObject.isShowTime && this.currentObject.startAt) ? true : false;
      switch (idx) {
        case 1:
          this._splitStrAppendToDom(this._shareTitle, shareTitSeatId, { "font-size": "32px", "font-weight": "bold" });
          this._splitStrAppendToDom(fromWhere, fromWhereSeatId, { "font-size": "22px" })
          this.spreadInfo.shareTitle = this._getSubStr(this._shareTitle, shareTitSeatId, shareTitElem, 2);
          this.spreadInfo.from = this._getSubStr(fromWhere, fromWhereSeatId, fromWhereElem, 2, 1);
          break;
        case 2:
          this._splitStrAppendToDom(this._shareTitle, shareTitSeatId, { "font-size": "32px", "font-weight": "bold" });
          this._splitStrAppendToDom(fromWhere, fromWhereSeatId, { "font-size": "26px" })
          this.spreadInfo.shareTitle = this._getSubStr(this._shareTitle, shareTitSeatId, shareTitElem, 2);
          this.spreadInfo.from = this._getSubStr(fromWhere, fromWhereSeatId, fromWhereElem, 2, 1);
          break;
        case 3:
          this._splitStrAppendToDom(this._shareTitle, shareTitSeatId, { "font-size": "32px", "font-weight": "bold" });
          this._splitStrAppendToDom(fromWhere, fromWhereSeatId, { "font-size": "26px" })
          this.spreadInfo.shareTitle = this._getSubStr(this._shareTitle, shareTitSeatId, shareTitElem, 2);
          this.spreadInfo.from = this._getSubStr(fromWhere, fromWhereSeatId, fromWhereElem, 2, 1);
          break;
        case 4:
          this._splitStrAppendToDom(this._shareTitle, shareTitSeatId, { "font-size": "36px", "font-weight": "bold" });
          this._splitStrAppendToDom(fromWhere, fromWhereSeatId, { "font-size": "28px" })
          this.spreadInfo.shareTitle = this._getSubStr(this._shareTitle, shareTitSeatId, shareTitElem, 2);
          this.spreadInfo.from = this._getSubStr(fromWhere, fromWhereSeatId, fromWhereElem, 2, 1);
          break;
        case 5:
          this._splitStrAppendToDom(this._shareTitle, shareTitSeatId, { "font-size": "32px", "font-weight": "bold" });
          this._splitStrAppendToDom(fromWhere, fromWhereSeatId, { "font-size": "26px" });
          this.spreadInfo.shareTitle = this._getSubStr(this._shareTitle, shareTitSeatId, shareTitElem, 2);
          this.spreadInfo.from = this._getSubStr(fromWhere, fromWhereSeatId, fromWhereElem, 2, 1);
          break;
        case 6:
          this._splitStrAppendToDom(this._shareTitle, shareTitSeatId, { "font-size": "32px", "font-weight": "bold" });
          this._splitStrAppendToDom(this._fromWhere, fromWhereSeatId, { "font-size": "24px" });
          this.spreadInfo.shareTitle = this._getSubStr(this._shareTitle, shareTitSeatId, shareTitElem, 2);
          this.spreadInfo.from = this._getSubStr(this._fromWhere, fromWhereSeatId, fromWhereElem, 1);
          break;
        case 7:
          this._splitStrAppendToDom(this._shareTitle, shareTitSeatId, { "font-size": "32px", "font-weight": "bold" });
          this._splitStrAppendToDom(this._fromWhere, fromWhereSeatId, { "font-size": "22px" })
          this.spreadInfo.shareTitle = this._getSubStr(this._shareTitle, shareTitSeatId, shareTitElem, 2);
          this.spreadInfo.from = this._getSubStr(this._fromWhere, fromWhereSeatId, fromWhereElem, isShowStartTime ? 1 : 2);
          break;
        case 8:
          this._splitStrAppendToDom(this._shareTitle, shareTitSeatId, { "font-size": "36px", "font-weight": "bold" });
          this._splitStrAppendToDom(this._fromWhere, fromWhereSeatId, { "font-size": "26px" })
          this.spreadInfo.shareTitle = this._getSubStr(this._shareTitle, shareTitSeatId, shareTitElem, 2);
          this.spreadInfo.from = this._getSubStr(this._fromWhere, fromWhereSeatId, fromWhereElem, 2);
          break;
        default:
          break
      }
    },
    /**
     * @描述: 根据元素的宽度和取的行数截取字符串
     * @val {String} 传入要截取的字符串
     * @wrapId {String} 计算承载字体宽度的元素的Id
     * @elem {object(DOM Object)} 转化后要插入字体的元素
     * @row {Number} 限制行数
     * @endSplitLen {Number} 末尾截取的长度（特殊字符的时候手动调整）
     * @返回 {String}  截取后的字符串
     */
    _getSubStr: function (val, wrapId, elem, row, endSplitLen = false) {
      let childs = document.getElementById(wrapId).children;
      let sumW = 0;
      let elemW = elem ? elem.offsetWidth : '400';
      let str = "";
      for (let i = 0; i < childs.length; i++) {
        sumW += childs[i].offsetWidth;
        if (sumW > row * elemW) {
          if (!endSplitLen) {
            str = val.substr(0, i - 2) + "..."
          } else {
            str = val.substr(0, i - endSplitLen - 2) + "..." + (endSplitLen ? val.substr(childs.length - endSplitLen, childs.length) : '');
          }
          break;
        } else if (i == childs.length - 1) {
          str = val;
        }
      }
      return str;
    },
    /**
     * @描述: 将val根据设定的大小插入到计算容器
     * @val {String} 传入要截取的字符串
     * @elemId {String} 要插入的元素的Id
     * @styleObj {object} 字体样式设置
     * @返回 {undefined}
     */
    _splitStrAppendToDom(val, elemId, styleObj) {
      let styleStr = "";
      if (Object.prototype.toString.call(styleObj) === '[object Object]') {
        for (let k in styleObj) {
          styleStr += k + ":" + styleObj[k] + ";";
        }
      }
      let domArr = [];
      val.split("").forEach((item, index) => {
        domArr.push("<span style='" + styleStr + "'>" + item + "</span>");
      });
      document.getElementById(elemId).innerHTML = domArr.join("");
    }
  },
  mounted() {
    console.time('html2canvasJsTime')
    //如果是ios,则去掉minHeight设置，防止底部前进后退导航挡住页面
    if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      document.getElementById("spreadRoot").style.minHeight = "";
      document.getElementById("spreadRoot").style.height = "100%";
      // if (!localStorage.getItem("isReload")) {
      //   localStorage.setItem("isReload", true);
      //   window.location.reload(true);
      // } else {
      //   localStorage.removeItem("isReload");
      // }
    }
    extId = -1;
    bgList = [];
    this.spreadInfo = null;
    this.shortLink = '';
    document.querySelector("#spreadImg img").setAttribute("src", "");
    this.content = [];
    extId = this.$route.query.extId;
    this.cId = this.$route.query.cId;
    this.cmpId = this.$route.query.cmpId || '';
    this.ckFrom = this.$route.query.ckFrom;
    this.promote = this.$route.query.promote || '';
    this.distribution = this.$route.query.distribution && this.$route.query.distribution != 0 ? 1 : '';
    this.isNoSale = this.$route.query.isNoSale ? true : false; //是否停止售卖
    this.isFromChain = this.$route.query.fromChain == 'true' ? true : false;
    if (this.ckFrom == global.ckFrom.course || this.ckFrom == global.ckFrom.column) {
      getBindPhoneSetting(this.ckFrom).then(res => {
        this.bindPhoneSetting = res;
      });
    }
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas.js").then(res => {
      html2canvas = res.default;
      console.timeEnd('html2canvasJsTime')
      console.time('getSpreadInfoTime')
      this.getSpreadInfo();
    })
    if ((this.cfg && this.cfg.enableShowProfit) || this.isFromChain) {
      this.getPromote();
      if (!this.isFromChain) {
        this.getPromoteUserInfo();
      }
    }
  },
  beforeDestroy() {
    this.$loading.hide();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.marginL30 {
  margin-left: 30px;
}
.border1:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  border: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.copy_shadow {
  box-shadow: 0 -1px 0 0 #F2F2F2;
}
.active_bg {
  background: rgb(255, 242, 230);
  border: .05rem solid #FE7901;
}
.bg-f2 {
  background: rgba(242, 242, 242, .3);
}
.w678 {
  width: 678px;
}
.maxh452 {
  max-height: 452px;
}
.height746 {
  height: 18.65rem;
}
.spread_gray {
  /* width: 100%; */
  height: 2px;
  /* margin-top: 50px; */
  background: url('../../../assets/i/wap/spread/dasheed_gray.png') repeat center center;
  background-size: contain;
}
.spread_green {
  width: 100%;
  height: 2px;
  margin-top: 46px;
  background: url('../../../assets/i/wap/spread/dasheed_green.png') repeat center center;
  background-size: contain;
}
.spread_dashed_g {
  width: 100%;
  height: 2px;
  margin-top: 20px;
  background: url('../../../assets/i/wap/spread/dasheed_g.png') repeat center center;
  background-size: contain;
}
.spread_dashed {
  width: 100%;
  height: 2px;
  margin-top: 20px;
  background: url('../../../assets/i/wap/spread/dasheed.png') repeat center center;
  background-size: contain;
}
.w570 {
  width: 570px;
}
.maxh380 {
  max-height: 380px;
}
.btr20 {
  border-top-right-radius: 20px;
}
.btl20 {
  border-top-left-radius: 20px;
}
.spread_shadow {
  background: #fff url('../../../assets/i/wap/spread/spread_shadow.png') no-repeat -0.1rem center;
  background-size: contain;
}
.spread_text {
  background: rgba(204, 204, 204, .3);
}
#spreadRoot {
  font-family: "\9ED1\4F53";
}
.width-420rem {
  width: 10.5rem;
}
.invitation {
  background-repeat: no-repeat;
  width: 66%;
  background-size: contain;
  height: 88%;
}
.canvasBox {
  width: 6800px;
  height: 1334px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.anvasContent {
  width: 750px;
  height: 1334px;
  position: relative;
}
.canvasOne {
  padding-top: 180px;
  width: 560px;
  margin: 0 auto;
}
.canvasTwo {
  padding-top: 70px;
  width: 480px;
  margin: 0 auto;
}
.canvasThree {
  padding-left: 85px;
  padding-top: 294px;
  padding-right: 85px;
}
.canvasFour {
  padding-top: 40px;
  padding-left: 85px;
  padding-right: 85px;
}
.content-five {
  margin: 66px 50px 68px 50px;
  height: calc(100% - 134px);
  padding-top: 62px;
  width: calc(100% - 100px);
}
.canvasSix {
  padding-top: 150px;
  width: 530px;
  margin: 0 auto;
}
.canvasEight {
  padding-top: 40px;
}
.paddingThree {
  margin: 0 10px 0 auto;
}
.paddingAll10 {
  padding: 10px;
}
.avatar-bg {
  background: rgba(255, 255, 255, 0.5);
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
}
.pl20 {
  padding-left: 20px;
}
.ml120 {
  margin-left: 120px;
}
.pr40 {
  padding-right: 40px;
}
.pb40 {
  padding-bottom: 40px;
}
.br10 {
  border-radius: 10px;
}
.br15 {
  border-radius: 15px;
}
.br20 {
  border-radius: 20px;
}
.w50 {
  width: 50%;
}
.w100 {
  width: 100%;
}
.w300 {
  width: 300px;
}
.w320 {
  width: 320px;
}
.w326 {
  width: 326px;
}
.w340 {
  width: 340px;
}
.w400 {
  width: 400px;
}
.w450 {
  width: 450px;
}
.w480 {
  width: 480px;
}
.maxw450 {
  max-width: 450px;
}
.maxw480 {
  max-width: 480px;
}
.w500 {
  width: 500px;
}
.w507 {
  width: 507px;
}
.w510 {
  width: 510px;
}
.maxw510 {
  max-width: 510px;
}
.w540 {
  width: 540px;
}
.w580 {
  width: 580px;
}
.maxw580 {
  max-width: 580px;
}
.w600 {
  width: 600px;
}
.w650 {
  width: 650px;
}
.h10 {
  height: 10px;
}
.h12 {
  height: 12px;
}
.h65 {
  height: 65px;
  line-height: 27px;
}
.minh65 {
  height: 23px;
  max-height: 65px;
}
.h23 {
  height: 23px;
  line-height: 26px;
}
.lh-24 {
  line-height: 24px;
}
.h27 {
  height: 27px;
  line-height: 27px;
}
.h30 {
  height: 30px;
}
.h40 {
  height: 40px;
  line-height: 40px;
}
.h50 {
  height: 50px;
  line-height: 50px;
}
.h80 {
  height: 80px;
}
.hh100 {
  height: 100px;
}
.h120 {
  height: 120px;
}
.h240 {
  height: 240px;
}
.h300 {
  height: 300px;
}
.maxh300 {
  max-height: 300px;
}
.h320 {
  height: 320px;
}
.maxh450 {
  max-height: 450px;
}
.maxh320 {
  max-height: 320px;
}
.maxh480 {
  max-height: 480px;
}
.maxh580 {
  max-height: 580px;
}
.maxh510 {
  max-height: 510px;
}
.h400 {
  height: 400px;
}
.maxh400 {
  max-height: 400px;
}
.h580 {
  height: 580px;
}
.h100 {
  height: 100%;
}
.h160 {
  height: 160px;
}
.bgLocation {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.mt10 {
  margin-top: 10px;
}
.mt12 {
  margin-top: 12px;
}
.mt16 {
  margin-top: 16px;
}
.mt20 {
  margin-top: 20px;
}
.mt25 {
  margin-top: 25px;
}
.mt30 {
  margin-top: 30px;
}
.mt44 {
  margin-top: 44px;
}
.mt60 {
  margin-top: 60px;
}
.mt280 {
  margin-top: 280px;
}
.mt135 {
  margin-top: 135px;
}
.ml9 {
  margin-left: 9px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb40 {
  margin-bottom: 40px;
}
.ml490 {
  margin-left: 490px;
}
.mb64 {
  margin-bottom: 64px;
}
.mb102 {
  margin-bottom: 102px;
}
.hidden {
  overflow: hidden;
}
.headerImg {
  height: 88px;
  width: 88px;
}
.headerImg120 {
  width: 120px;
  height: 120px;
}
.headerImgFive {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.headerImg88 {
  height: 88px;
  width: 88px;
}
.qrcodeImg130 {
  width: 130px;
  height: 130px;
}
.spread-from4 {
  left: 50%;
  bottom: 338px;
  transform: translateX(-50%);
}
.qr-text4 {
  left: 50%;
  bottom: 132px;
  transform: translateX(-50%);
}
.qrcodeImg160 {
  width: 160px;
  height: 160px;
}
.qrcodeImg200 {
  width: 200px;
  height: 200px;
}
.fs22 {
  font-size: 22px;
}
.fs24 {
  font-size: 24px;
}
.fs26 {
  font-size: 26px;
}
.fs28 {
  font-size: 28px;
}
.fs30 {
  font-size: 30px;
}
.fs32 {
  font-size: 32px;
}
.fs36 {
  font-size: 36px;
}
canvas {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
}
.bg-2F3843 {
  background-color: #EDEDED;
}
.line {
  width: 535px;
  height: 1px;
  background-color: #cccccc;
}
.h255 {
  height: 255px;
}
.h340 {
  height: 340px;
}
.maxh340 {
  max-height: 340px;
}
.fb170 {
  left: 0;
  right: 0;
  margin: auto;
  bottom: 170px;
}
.fb17 {
  left: 0;
  right: 0;
  margin: auto;
  bottom: 17px;
}
.fb20 {
  left: 0;
  right: 0;
  margin: auto;
  bottom: 20px;
}
.fb100 {
  left: 0;
  right: 0;
  margin: auto;
  bottom: 100px;
}
.l70 {
  left: 70px;
}
.b35 {
  bottom: 35px;
}
.b110 {
  bottom: 110px;
}
.b100 {
  bottom: 100px;
}
.b120 {
  bottom: 120px;
}
.b200 {
  bottom: 200px;
}
.l20 {
  left: 20px;
}
.l295 {
  left: 295px;
}
.r50 {
  right: 50px;
}
.customOne {
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 60px;
  padding-bottom: 100px;
}
.customThree {
  bottom: 100px;
  left: 50px;
}
.customThreeText {
  bottom: 0;
  left: 50px;
  padding-top: 130px;
  height: 260px;
}
.chunk {
  width: 110px;
  height: 12px;
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 37px;
  background-color: #5ea6ef;
}
.check {
  top: calc(50% - 0.4rem);
  left: calc(50% - 0.4rem);
}
.reward {
  right: 0;
  top: 2rem;
  position: absolute;
  padding: 0 0.4rem;
  height: 1rem;
  background: rgba(255, 113, 0, 0.98);
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 20px 0px 0px 20px;
}
.w160 {
  width: 160px;
}
.max240 {
  max-height: 240px;
}
.box-shadow {
  box-shadow: 0 0 0 0 rgba(68, 145, 223, 0.3);
}
.lecturer-tag {
  width: 50px;
  height: 25px;
  line-height: 25px;
  border-radius: 8px 8px 0 8px;
  border: 2px solid #999;
  font-size: 15px;
  margin-right: 10px;
}
.fc-invite4 {
  color: #dc491d;
}
.fc-price {
  color: #ff632d;
}
.fc-white {
  color: white !important;
}
.masker {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: #fff;
  opacity: 0.5;
}
.show-companyInfo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #999;
  font-weight: 400;
}
.spread1-companyInfo {
  color: white !important;
  bottom: 15px;
}
.spread3-companyInfo {
  color: white !important;
  opacity: 0.7;
}
.spread6-companyInfo {
  bottom: 20px !important;
}
.spread7-companyInfo {
  bottom: 62px !important;
  color: white !important;
  opacity: 0.7;
}
.spread8-companyInfo {
  height: 40px;
}
.bottom-section8 {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 45px;
}
.color-one {
  color: #a33838;
}
.color-two {
  color: #dcc5b0;
}
.color-six {
  color: #3a56b6;
}
.color-seven {
  color: #d7bba1;
}
.sharetit-seat,
.fromwhere-seat {
  position: absolute;
  left: -999999px;
  top: -9999999px;
}
.qrBgImg{
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/14_material_admin/image/public/images/example-images/invitationCard/qrcodeOutsideBorder.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
<style>
.promote-family {
  font-family:  "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
</style>
